Changing the type of an input field using jQuery (text -> password)

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

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 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.