change html input type by JS

Question

How to do this through the tag itself change type from text to password   lt input type  text  name  pass     gt    Is it possible to insert JS inside the input tag itself to change type  text  to type  password

User · Answer

x000D   x000D      show-pass   click function  e    x000D      e preventDefault    x000D      var type       signupform-password   attr  type    x000D      switch  type    x000D          case  password   x000D            x000D                  signupform-password   attr  type    text    x000D              return  x000D            x000D          case  text   x000D            x000D                  signupform-password   attr  type    password    x000D              return  x000D            x000D        x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt input type  text  name  password  class  show-pass  gt  x000D   x000D   x000D

User · Answer

Yes  you can even change it by triggering an event   lt input type  text  name  pass   onclick   this type  password      gt     lt input type  text  placeholder  date  onfocusin   this type  date    onfocusout   this type  text    gt

User · Answer

I had to add a   value  to the end of Evert s code to get it working   Also I combined it with a browser check so that input type  number  field is changed to type  text  in Chrome since  formnovalidate  doesn t seem to work right now   if  navigator userAgent toLowerCase   indexOf  chrome    gt  -1      document getElementById  input id   attributes  type   value    text

User · Answer

lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 or TR xhtml1 DTD xhtml1-transitional dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  gt   lt head gt   lt meta http-equiv  Content-Type  content  text html  charset iso-8859-1    gt   lt title gt Untitled Document lt  title gt   lt script type  text javascript  language  javascript  gt  function changefield        document getElementById  passwordbox   innerHTML     lt input id   passwordfield   type   password   name   password-field   title   Password   tabindex   2     gt        document getElementById  password-field  focus       lt  script gt   lt  head gt    lt body gt   lt div id  passwordbox  gt   lt input id  password-field  type  text  name  password-field  title  Password onfocus  changefield     value  Password  tabindex  2    gt   lt  div gt   lt input type  submit  name  submit  value  sign in  tabindex  3    gt    lt  body gt   lt  html gt

User · Answer

Here is what I have for mine   Essentially you are utilizing the onfocus and onblur commands in the  tag to trigger the appropriate javascript   It could be as simple as    lt span gt  lt input name  login text password  type  text  value  Password  onfocus  this select    this setAttribute  type   password     onblur  this select    this setAttribute  type   text       gt  lt  span gt    An evolved version of this basic functionality checks for and empty string and returns the password input back to the original  Password  in the event of a null textbox        lt script type  text javascript  gt          function password set attribute                 if  document getElementsByName  login text password   0  value replace   s  g                document getElementsByName 0  value    null                    document getElementsByName  login text password   0  setAttribute  type   text                   document getElementsByName  login text password   0  value    Password                             else                   document getElementsByName  login text password   0  setAttribute  type   password                                lt  script gt     Where HTML looks like    lt span gt  lt input name  login text password  class  roundCorners  type  text  value  Password  onfocus  this select    this setAttribute  type   password     onblur  password set attribute       gt  lt  span gt

User · Answer

Try    lt input id  hybrid  type  text  name  password    gt    lt script type  text javascript  gt      document getElementById  hybrid   type    password    lt  script gt

User · Answer

Changing the type of an  lt input type password gt  throws a security error in some browsers  old IE and Firefox versions    You   ll need to create a new input element  set its type to the one you want  and clone all other properties from the existing one   I do this in my jQuery placeholder plugin  https   github com mathiasbynens jquery-placeholder blob master jquery placeholder js L80-84  To work in Internet Explorer    dynamically create a new element copy the properties of the old element into the new element set the type of the new element to the new type replace the old element with the new element   The function below accomplishes the above tasks for you    lt script gt  function changeInputType oldObject  oType        var newObject   document createElement  input        newObject type   oType      if oldObject size  newObject size   oldObject size      if oldObject value  newObject value   oldObject value      if oldObject name  newObject name   oldObject name      if oldObject id  newObject id   oldObject id      if oldObject className  newObject className   oldObject className      oldObject parentNode replaceChild newObject oldObject       return newObject     lt  script gt

User · Answer

This is not supported by some browsers  IE if I recall   but it works in the rest   document getElementById  password-field   attributes  type      password     or  document getElementById  password-field   attributes  type      text

[javascript] change html input type by JS?

Examples related to javascript

Examples related to html

Examples related to input