jQuery change input type

Question

Trying to change input type attribute from password to text.

$(\'.form\').find(\'input:password\').attr({type:\"text\"         


        

Answer 1

You can't do this with jQuery, it explicitly forbids it because IE doesn't support it (check your console you'll see an error.

You have to remove the input and create a new one if that's what you're after, for example:

$('.form').find('input:password').each(function() {
   $("<input type='text' />").attr({ name: this.name, value: this.value }).insertBefore(this);
}).remove();

You can give it a try here

To be clear on the restriction, jQuery will not allow changing type on a <button> or <input> so the behavior is cross-browser consistent (since IE doens't allow it, they decided it's disallowed everywhere). When trying you'll get this error in the console:

Error: type property can't be changed

Answer 2

USE prop instead attr

$('.form').find('input:password').prop({type:"text"});

Answer 3

    //Get current input object
    var oldInput = $('foo');
    //Clone a new input object from it
    var newInput = oldInput.clone();
    //Set the new object's type property
    newInput.prop('type','text');
    //Replace the old input object with the new one.
    oldInput.replaceWith(newInput);

Answer 4

Here are two functions, accepting an array of selector(s) as a parameter that will accomplish this:

  // Turn input into Number keyboard
  function inputNumber(numArr) {
    if (numArr instanceof Array) {
      for (var i = 0; i < numArr.length; i++) {
        if ($(numArr[i]).length > 0) {
          var copy = $(numArr[i]);
          var numEle = copy.clone();
          numEle.attr("type", "number");
          numEle.insertBefore(copy);
          copy.remove();
        }
      }
    }
  }
  // Turn input into Email keyboard 
  function inputEmail(emailArr) {
    if (emailArr instanceof Array) {
      for (var i = 0; i < emailArr.length; i++) {
        if ($(emailArr[i]).length > 0) {            
          var copy = $(emailArr[i]);
          var numEle = copy.clone();
          numEle.attr("type", "number");
          numEle.insertBefore(copy);
          copy.remove();
        }
      }
    }
  }

You can then use this like:

  var numberArr = ["#some-input-id", "#another-input-id"];
  var emailArr = ["#some-input-id", "#another-input-id"];

  inputNumber(numberArr);
  inputEmail(emailArr);

Answer 5

function passShowHide(){
  if( $("#YourCheckBoxID").prop('checked') ){
    document.getElementById("EnterPass").attributes["type"].value = "text";
  }
  else{
    document.getElementById("EnterPass").attributes["type"].value="password";}

Answer 6

This should work easily.

$("selector").attr('type', 'hidden'); 
//Changing it to hidden