jQuery change input type

Question

Trying to change input type attribute from password to text.

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

Why this doesn't work?

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

This should work easily.

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

Answer 4

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

Answer 5

This is pretty easy thou. This works pretty fine.

 $('#btn_showHide').on('click', function() {
    if($(this).text() == 'Show')
    {
      $(this).text('Hide');
      $('#code').attr('type', 'text');
    }
    else
    {
      $(this).text('Show');
      $('#code').attr('type', 'password');
    }
  });

Answer 6

I know I'm a little late to the game, but I was just able to do this in IE9 (it appears that Microsoft decided to allow it?). However, I had to do it with straight JavaScript. This is just a sample of a form with a dropdownlist that changes the field type depending on what is selected in the dropdown.

function switchSearchFieldType(toPassword) {
    $('#SearchFieldText').val('');
    if (toPassword === true) {
        $('#SearchFieldText').get(0).setAttribute('type', 'password');
    } else {
        $('#SearchFieldText').get(0).setAttribute('type', 'text');
    }
}

$('#SelectedDropDownValue').change(function () {
    if ($("select option:selected").val() === 'password') {
        switchSearchFieldType(true);
    }
    else {
        switchSearchFieldType(false);
    }
}).change();