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 stackoverflow.com/questions/1544317/…

thisgeek
– thisgeek

2012-11-09 19:55:52 +00:00
Commented Nov 9, 2012 at 19:55 — thisgeek
– thisgeek, Commented Nov 9, 2012 at 19:55

karim79 · Accepted Answer · 2011-06-19 13:03:09Z

14

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, 2011 at 13:03

karim79

343k67 gold badges420 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1946705 Over a year ago

Thanks all for your replies. I am working with this tutorial. 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?

Niklas · Accepted Answer · 2011-06-19 13:06:12Z

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, 2011 at 13:06

answered Jun 19, 2011 at 13:01

Niklas

30k5 gold badges54 silver badges74 bronze badges

Comments

user1844655 · Accepted Answer · 2012-11-22 10:15:33Z

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, 2012 at 10:15

user1844655

611 silver badge2 bronze badges

1 Comment

Adam Casey Over a year ago

This is great but I get a syntax error; shouldn't your function be inside the parenthesis? .focus(function(){ ... });

Matthew Scharley · Accepted Answer · 2011-06-19 13:04:41Z

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, 2011 at 13:04

Matthew Scharley

133k55 gold badges199 silver badges225 bronze badges

2 Comments

Niklas Over a year ago

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

Matthew Scharley Over a year ago

@niklas: Yes, I saw your answer. Unfortunately, once again it's only IE that doesn't work as one might reasonably expect...

Suresh Pattu · Accepted Answer · 2014-08-25 09:45:41Z

0

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

answered Aug 25, 2014 at 9:45

Suresh Pattu

6,28718 gold badges63 silver badges93 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

1 Comment

Comments

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related