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

Duplicate of http://stackoverflow.com/questions/1544317/jquery-change-type-of-input-field — thisgeek, Nov 09 '12 at 19:55

score 13 · Answer 1 · answered Jun 19 '11 at 13:03

13

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/

answered Jun 19 '11 at 13:03

karim79

326,960
63
404
402

Thanks all for your replies. I am working with this [tutorial](http://webservices.blog.gustavus.edu/2008/06/23/text-input-example-text-with-jquery/). But even if you help me (glad for it), I am still struggling with problem about input type="password" and text in that input... It is possible to edit this tutorial for password input at all? – user1946705 Jun 19 '11 at 13:22

Niklas · Answer 2 · 2011-06-19T13:06:12.530

6

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.

edited Jun 19 '11 at 13:06

answered Jun 19 '11 at 13:01

Niklas

28,674
4
46
68

score 5 · Answer 3 · answered Nov 22 '12 at 10:15

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

answered Nov 22 '12 at 10:15

user1844655

61
1
2

This is great but I get a syntax error; shouldn't your function be inside the parenthesis? .focus(function(){ ... }); – Adam Casey Jun 18 '14 at 01:33

score 1 · Answer 4 · answered Jun 19 '11 at 13:04

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.

answered Jun 19 '11 at 13:04

Matthew Scharley

115,776
51
189
215

check my answer. That error is thrown by jQuery for a reason, "The exception is actually thrown by jQuery so isn't a bug but a feature letting the coder know that doesn't work." – Niklas Jun 19 '11 at 13:10
@niklas: Yes, I saw your answer. Unfortunately, once again it's only IE that doesn't work as one might reasonably expect... – Matthew Scharley Jun 19 '11 at 13:11

score 0 · Answer 5 · answered Aug 25 '14 at 09:45

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+'">');
});

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

5 Answers5

Linked

Related