change type of input field with jQuery

Question

document  ready function             login-box password field         password   attr  type    text            password   val  Password          This is supposed to change the  password input field  with id  password   that is of type password to a normal text field  and then fill in the text    Password      It doesn   t work  though  Why   Here is the form    lt form enctype  application x-www-form-urlencoded  method  post  action   auth sign-in  gt     lt ol gt       lt li gt         lt div class  element  gt           lt input type  text  name  username  id  username  value  Prihlasovacie meno  class  input-text    gt         lt  div gt       lt  li gt       lt li gt         lt div class  element  gt           lt input type  password  name  password  id  password  value    class  input-text    gt         lt  div gt       lt  li gt       lt li class  button  gt         lt div class  button  gt           lt input type  submit  name  sign in  id  sign in  value  Prihl  sit  class  input-submit    gt         lt  div gt       lt  li gt     lt  ol gt   lt  form gt

User · Answer

Just another option for all the IE8 lovers, and it works perfect in newer browsers. You can just color the text to match the background of the input. If you have a single field, this will change the color to black when you click/focus on the field. I would not use this on a public site since it would 'confuse' most people, but I am using it in an ADMIN section where only one person has access to the users passwords.

$('#MyPass').click(function() {
    $(this).css('color', '#000000');
});

-OR-

$('#MyPass').focus(function() {
    $(this).css('color', '#000000');
});

This, also needed, will change the text back to white when you leave the field. Simple, simple, simple.

$("#MyPass").blur(function() {
    $(this).css('color', '#ffffff');
});

[ Another Option ] Now, if you have several fields that you are checking for, all with the same ID, as I am using it for, add a class of 'pass' to the fields you want to hide the text in. Set the password fields type to 'text'. This way, only the fields with a class of 'pass' will be changed.

<input type="text" class="pass" id="inp_2" value="snoogle"/>

$('[id^=inp_]').click(function() {
    if ($(this).hasClass("pass")) {
        $(this).css('color', '#000000');
    }
    // rest of code
});

Here is the second part of this. This changes the text back to white after you leave the field.

$("[id^=inp_]").blur(function() {
    if ($(this).hasClass("pass")) {
        $(this).css('color', '#ffffff');
    }
    // rest of code
});

User · Answer

A more cross-browser solution    I hope the gist of this helps someone out there   This solution tries to set the type attribute  and if it fails  it simply creates a new  lt input gt  element  preserving element attributes and event handlers   changeTypeAttr js  GitHub Gist       x is the  lt input  gt  element    type is the type you want to change it to     jQuery is required and assumed to be the     variable    function changeType x  type        x     x       if x prop  type      type          return x    That was easy      try           return x prop  type   type     Stupid IE security will not allow this       catch e              Try re-creating the element  yep    this sucks            jQuery has no html   method for the element  so we have to put into a div first         var html       lt div gt    append x clone    html            var regex    type            s             matches type text or type  text            If no match  we add the type attribute to the end  otherwise  we replace         var tmp     html match regex     null               html replace   gt      type      type      gt                  html replace regex   type      type                     Copy data from old element         tmp data  type   x data  type              var events   x data  events            var cb   function events                return function                       Bind all prior events                 for i in events                                        var y   events i                       for j in y                          tmp bind i  y j  handler                                             events           x replaceWith tmp           setTimeout cb  10     Wait a bit to call function         return tmp

User · Answer

An ultimate way to use jQuery     Leave the original input field hidden from the screen       Password   hide      Hide it first var old id       Password   attr  id      Store ID of hidden input for later use     Password   attr  id   Password hidden      Change ID for hidden input   Create new input field on the fly by JavaScript   var new input   document createElement  input      Migrate the ID and value from hidden input field to the new input field   new input setAttribute  id   old id     Assign old hidden input ID to new input new input setAttribute  type   text      Set proper type new input value       Password hidden   val      Transfer the value to new input     Password hidden   after new input     Add new input right behind the hidden input   To get around the error on IE like type property cannot be changed  you may find this useful as belows   Attach click focus change event to new input element  in order to trigger the same event on hidden input     new input  click function       Password hidden   click         Replicate above line for all other events like focus  change and so on      Old hidden input element is still inside the DOM so will react with the event triggered by new input element  As ID is swapped  new input element will act like the old one and respond to any function call to old hidden input s ID  but looks different      A little bit tricky but WORKS     -

User · Answer

Simply this   this type    password     such as      password   click function        this type    password         This is assuming that your input field was set to  text  before hand

User · Answer

It works much easier with that   document querySelector  input type password    setAttribute  type    text      and in order to turn it back to password field again  assuming the password field is the 2nd input tag with text type    document querySelectorAll  input type text    1  setAttribute  type    password

User · Answer

Nowadays  you can just use      password   prop  type    text      But of course  you should really just do this   lt input type  password  placeholder  Password    gt    in all but IE  There are placeholder shims out there to mimic that functionality in IE as well

User · Answer

Simple solution for all those who want the functionality in all browsers   HTML   lt input type  password  id  password  gt   lt input type  text  id  passwordHide  style  display none   gt   lt input type  checkbox  id  passwordSwitch  checked  checked  gt Hide password   jQuery      passwordSwitch   change function        var p       password        var h       passwordHide        h val p val         if   this  attr  checked     checked            h hide            p show         else          p hide            h show

User · Answer

This Worked for me       newpassword field   attr  type    text

User · Answer

jQuery fn outerHTML   function         return   this  clone   wrap   lt div gt    parent   html          input password   replaceWith    input password   outerHTML   replace  text g  password

User · Answer

Type properties can t be changed you need to replace or overlay the input with a text input and send the value to the password input on submit

User · Answer

Just create a new field to bypass this security thing   var  oldPassword       password    var  newPassword       lt input type  text    gt                               val  oldPassword val                               appendTo  oldPassword parent      oldPassword remove     newPassword attr  id   password

User · Answer

One step solution      password   get 0  type    text

User · Answer

I haven t tested in IE  since I needed this for an iPad site  - a form I couldn t change the HTML but I could add JS   document getElementById  phonenumber   type    tel      Old school JS is ugly next to all the jQuery    But  http   bugs jquery com ticket 1957 links to MSDN   As of Microsoft Internet Explorer 5  the type property is read write-once  but only when an input element is created with the createElement method and before it is added to the document   so maybe you could duplicate the element  change the type  add to DOM and remove the old one

User · Answer

Try this  Demo is here    document  delegate  input type  text     click   function           this  replaceWith   lt input type  password  value    this value    id    this id    gt            document  delegate  input type  password     click   function           this  replaceWith   lt input type  text  value    this value    id    this id    gt

User · Answer

It s very likely this action is prevented as part of the browser s security model   Edit  indeed  testing right now in Safari  I get the error type property cannot be changed   Edit 2  that seems to be an error straight out of jQuery  Using the following straight DOM code works just fine   var pass   document createElement  input    pass type    password   document body appendChild pass   pass type    text   pass value    Password     Edit 3  Straight from the jQuery source  this seems to be related to IE  and could either be a bug or part of their security model  but jQuery isn t specific       We can t allow the type property to be changed  since it causes problems in IE  if   name     type   amp  amp  jQuery nodeName  elem   input     amp  amp  elem parentNode       throw  type property can t be changed

User · Answer

I guess you could use a background-image that contains the word  password  and change it back to an empty background-image on  focus      blur    ----  image with  password    focus   -----  image with no  password   You could also do it with some CSS and jQuery  Have a text field show up exactly on top of the password field  hide   is on focus   and focus on the password field

User · Answer

I received the same error message while attempting to do this in Firefox 5   I solved it using the code below    lt script type  text javascript  language  JavaScript  gt     document  ready function         var passfield   document getElementById  password field id        passfield type    text        function focusCheckDefaultValue field  type  defaultValue        if  field value    defaultValue                field value                 if  type     pass                 field type    password           function blurCheckDefaultValue field  type  defaultValue        if  field value                      field value   defaultValue            if  type     pass   amp  amp  field value    defaultValue                field type    text             else if  type     pass   amp  amp  field value    defaultValue                field type    password             lt  script gt    And to use it  just set the onFocus and onBlur attributes of your fields to something like the following    lt input type  text  value  Username  name  username  id  username       onFocus  javascript focusCheckDefaultValue this       Username -OR- Email Address         onBlur  javascript blurCheckDefaultValue this       Username -OR- Email Address     gt    lt input type  password  value  Password  name  pass  id  pass      onFocus  javascript focusCheckDefaultValue this   pass    Password         onBlur  javascript blurCheckDefaultValue this   pass    Password     gt    I use this for a username field as well  so it toggles a default value  Just set the second parameter of the function to    when you call it   Also it might be worth noting that the default type of my password field is actually password  just in case a user doesn t have javascript enabled or if something goes wrong  that way their password is still protected    The   document  ready function is jQuery  and loads when the document has finished loading  This then changes the password field to a text field  Obviously you ll have to change  password field id  to your password field s id   Feel free to use and modify the code   Hope this helps everyone who had the same problem I did     -- CJ Kent  EDIT  Good solution but not absolute  Works on on FF8 and IE8 BUT not fully on Chrome 16 0 912 75 ver   Chrome does not display the Password text when the page loads  Also - FF will display your password when autofill is switched on

User · Answer

pass   focus function          pass   replaceWith   lt input id  password  size  70  type  password  value    name  password  gt         password   focus          lt input id  pass  size  70  type  text  value  password  name  password  gt

User · Answer

I like this way  to change the type of an input element  old input clone       Here is an example  There is an check box  id select multiple   If this is is changed to  selected   input elements with name  foo  should be changed to check boxes  If it gets unchecked  they should be become radio buttons again       function             id select multiple   change function          var new type          if    this  is   checked         val   is always  on            new type  checkbox          else            new type  radio                  input name  foo     each function index            var new input     this  clone             new input attr  type   new type            new input insertBefore   this               this  remove

User · Answer

This works for me       password   replaceWith     password   clone   attr  type    text

User · Answer

This will do the trick  Although it could be improved to ignore attributes that are now irrelevant   Plugin    function         fn changeType   function type          return this each function i  elm            var newElm       lt input type     type       gt             for var iAttr   0  iAttr  lt  elm attributes length  iAttr                  var attribute   elm attributes iAttr  name              if attribute      type                     continue                            newElm attr attribute  elm attributes iAttr  value                       elm  replaceWith newElm                   jQuery     Usage       submit   changeType  checkbox      Fiddle   http   jsfiddle net joshcomley yX23U

User · Answer

Here is a method which uses an image next to the password field to toggle between seeing the password  text input  and not seeing it  password input    I use an  open eye  and  closed eye  image  but you can use whatever suits you   The way it works is having two inputs images and upon clicking the image  the value is copied from the visible input to the hidden one  and then their visibility is swapped   Unlike many of the other answers which use hardcoded names  this one is general enough to use it multiple times on a page   It also degrades gracefully if JavaScript is unavailable   Here is what two of these look like on a page   In this example  the Password-A has been revealed by clicking on its eye      x000D   x000D    document  ready function     x000D       img eye   show    x000D       span pnt   on  click    img   function     x000D      var self     this   x000D      var myinp   self prev    x000D      var myspan   self parent    x000D      var mypnt   myspan parent    x000D      var otspan   mypnt children   not myspan   x000D      var otinp   otspan children   first    x000D      otinp val myinp val     x000D      myspan hide    x000D      otspan show    x000D        x000D      x000D  img eye   x000D    vertical-align  middle  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   x000D   lt form gt  x000D   lt b gt Password-A  lt  b gt  x000D   lt span class  pnt  gt  x000D   lt span gt  x000D   lt input type  password  name  passa  gt  x000D   lt img src  eye-open png  class  eye  alt  O  style  display none  gt  x000D   lt  span gt  x000D   lt span style  display none  gt  x000D   lt input type  text  gt  x000D   lt img src  eye-closed png  class  eye  alt     gt  x000D   lt  span gt  x000D   lt  span gt  x000D   lt  form gt  x000D   x000D   lt form gt  x000D   lt b gt Password-B  lt  b gt  x000D   lt span class  pnt  gt  x000D   lt span gt               x000D   lt input type  password  name  passb  gt  x000D   lt img src  eye-open png  class  eye  alt  O  style  display none  gt  x000D   lt  span gt   x000D   lt span style  display none  gt              x000D   lt input type  text  gt  x000D   lt img src  eye-closed png  class  eye  alt     gt  x000D   lt  span gt   x000D   lt  span gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

use this one it is very easy   lt input id  pw  onclick  document getElementById  pw   type  password     document getElementById  pw   value        name  password  type  text  value  Password    gt

User · Answer

Have you tried using  prop         password   prop  type   text      http   api jquery com prop

User · Answer

I ve created a jQuery extension to toggle between text and password   Works in IE8  probably 6 amp 7 as well  but not tested  and won t lose your value or attributes     fn togglePassword   function  showPass        return this each function              var  this     this           if   this attr  type       text      this attr  type       password                 var clone   null              if  showPass    null  amp  amp    this attr  type       text        showPass    null  amp  amp   showPass                     clone       lt input type  password    gt                  else if  showPass    null  amp  amp    this attr  type       password        showPass    null  amp  amp  showPass                    clone       lt input type  text    gt                                 each  this prop  attributes    function                     if this name     type                         clone attr this name  this value                                                 clone val  this val                  this replaceWith clone                          Works like a charm   You can simply call     element   togglePassword    to switch between the two or give an option to  force  the action based on something else  like a checkbox       element   togglePassword  checkbox prop  checked

User · Answer

Even easier    there s no need for all the dynamic element creation  Just create two separate fields  making one the  real  password field  type  password   and one a  fake  password field  type  text    setting the text in the fake field to a light gray color and setting the initial value to  Password   Then add a few lines of Javascript with jQuery as below        lt script type  text javascript  gt           function pwdFocus                     fakepassword   hide                    password   show                    password   focus                       function pwdBlur                 if      password   attr  value                                password   hide                        fakepassword   show                                 lt  script gt        lt input style  color   ccc  type  text  name  fakepassword  id  fakepassword  value  Password  onfocus  pwdFocus      gt       lt input style  display  none  type  password  name  password  id  password  value    onblur  pwdBlur      gt    So when the user enters the  fake  password field it will be hidden  the real field will be shown  and the focus will move to the real field  They will never be able to enter text in the fake field   When the user leaves the real password field the script will see if it s empty  and if so will hide the real field and show the fake one   Be careful not to leave a space between the two input elements because IE will position one a little bit after the other  rendering the space  and the field will appear to move when the user enters exits it

User · Answer

heres a DOM solution  myInput document getElementById  myinput    oldHtml myInput outerHTML  text myInput value  newHtml oldHtml replace  password   text    myInput outerHTML newHtml  myInput document getElementById  myinput    myInput value text

User · Answer

I just did the following to change the type of an input       ID of element   0  type    text     and it works   I was needing to do this because I was using jQuery UI datepickers  in an ASP NET Core 3 1 project and they were not working properly on Chromium-based browsers  see  https   stackoverflow com a 61296225 7420301

User · Answer

Here is a little snippet that allows you to change the type of elements in documents   jquery type js  GitHub Gist    var rtype        button input   i   jQuery attrHooks type set   function elem  value           We can t allow the type property to be changed  since it causes problems in IE      if  rtype test elem nodeName   amp  amp  elem parentNode               jQuery error   type property can t be changed                 JB  Or     can it           var  el     elem           var insertionFn    after           var  insertionPoint    el prev            if    insertionPoint length                insertionFn    prepend                insertionPoint    el parent                        el detach   attr  type   value            insertionPoint insertionFn   el           return value         else if   jQuery support radioValue  amp  amp  value      radio   amp  amp  jQuery nodeName elem   input                 Setting the type on a radio button after the value resets the value in IE6-9            Reset value to it s default in case type is set after value            This is for element creation         var val   elem value          elem setAttribute  type   value           if  val                elem value   val                    return value            It gets around the issue by removing the input from the document  changing the type and then putting it back where it was originally   Note that this snippet was only tested for WebKit browsers     no guarantees on anything else

[javascript] change type of input field with jQuery

Examples related to javascript

Examples related to jquery

Examples related to html-input