Changing the type of an input field using jQuery (

Question

I am trying to change type of input, specifically after click into input change type="text" to change="password".

I don't know why, but I can't to add the option type="password" as attribute to input.

        $('input#id_reg_pass').removeAttr("type"); #this works, type="text" is removing
        $('input#id_reg_pass').attr('type', 'password'); #problem, this not works
        $(this).addClass('exampleText').val($(this).attr('title'));

Haven't someone similar problem? I'll glad for every hint... Thank you

Answer 1

Your code throws an error for me, type property can't be changed. Interestingly though, the following code does work for me on Chrome at least:

$('input#id_reg_pass')[0].type = 'password';

It could be that this doesn't work cross-browser however, which would explain why jQuery doesn't allow it (As pointed out by Niklas, this is the case). Alternatively you could construct a new <input> with the same attributes and replace the old one with it.

Answer 2

You cannot change the attribute type after adding the element to the DOM, if you want it to function the same way on all browsers, see this and this.

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.

Answer 3

Try this demo is here

$(document).delegate('input[type="text"]','click', function() {
    $(this).replaceWith('<input type="password" value="'+this.value+'" id="'+this.id+'">');
}); 
$(document).delegate('input[type="password"]','click', function() {
    $(this).replaceWith('<input type="text" value="'+this.value+'" id="'+this.id+'">');
});

Answer 4

If you're using jQuery 1.6, use .prop instead:

$('input#id_reg_pass').removeAttr("type");
$('input#id_reg_pass').prop('type', 'password');
$(this).addClass('exampleText').val($(this).attr('title'));

Demo: http://jsfiddle.net/z8Rj3/

Answer 5

I had exactly the same problem, I wanted to show a text in a password field until the user clicked over it. I did another approach, instead to try to change the type of the field I hide it and showed a new text field, then called the focus(). It works fine.

$("#password_fake").focus(){
    $(this).hide();
    $("#password").show().focus();
}

where #password_fake is a text field and #password a password field with style="display:none".