Changing Attribute "type" from text to password
Solution 1
'type' property/attribute cannot be changed.
edit: This was accurate for JQuery at the time it was posted. See other answers for how it can be done now.
Solution 2
Yes u can.
Try this its works
<input type="text" class="pwd">
$('.pwd').click(function(){
$(this).get(0).type='password';
});
Solution 3
This is a security measure that most major browsers employ to mitigate screen-reading and password theft (it's more important going the other way, from password
to text
).
I can't tell from your code what you're trying to do, but here's my guess: you want a textbox with the word Password
in it as a hint, and when it gets focus, the user enters their password as a password field. To accomplish this, you can use two elements: an <input type="text">
and an <input type="password">
, the latter hidden initially. When the user focuses on the textbox, simply hide it, show the password field, and set the focus. It could get tricky toggling back and forth between them.
Update
This is now way easier to accomplish in modern browsers. Simply use something like this (here's a jsFiddle):
<input type="password" placeholder="Password" />
Solution 4
You can always use the pure js like:
document.getElementsByName("login_pass")[0].type="text";
Solution 5
You can't change the type attribute. you must create a new element and delete the old one like this:
var originalBtn = $("#password_input");
var newBtn = originalBtn.clone();
newBtn.attr("type", "password");
newBtn.insertBefore(originalBtn);
originalBtn.remove();
newBtn.attr("id", "password_input");
Related videos on Youtube
AndrewFerrara
Updated on January 06, 2021Comments
-
AndrewFerrara almost 3 years
Why isn't the jQuery changing the type attribute of #password_input to password?
<html> <head> <title></title> <style type="text/css"> </style> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#password_input").attr('type','password'); }); </script> </head> <body> <div id="loginBox"> <form> <input type="text" id="username_input" name="username" /><br /> <input type="text" id="password_input" name="password" /> </form> </div> </body> </html>
-
JClaspill over 12 yearsLook at bug reports on api.jquery.com/attr to see that you are not alone. Firebug will even tell you that 'property cannot be changed'.
-
AndrewFerrara over 12 yearsyes thats exactly what I'm going for... but this threw a wench it what I thought would be fairly simple
-
Hussein over 12 years@AndrewFerrara check my updated answer for focus blur solution
-
JClaspill about 11 yearsI'm not sure why this keeps getting voted down... Anyone care to explain why I keep getting downvotes?
-
Adil Malik about 11 yearsWorked in chrome like a charm. Thanks.
-
José Fernandes almost 11 yearsMan, this was my "oh, I learned something today" moment for today. Many thanks!
-
Tom almost 11 yearsit can! I do it all the time with Java Script.
-
owagh almost 11 yearsbecause the question is about jquery and not javascript
-
owagh almost 11 yearsbecause people are getting confused between jquery and javascript. maybe you can edit your answer to reflect that?
-
salmanhijazi almost 11 yearsAwesome! Works like a charm.
-
David almost 11 yearsNice, but can this be accomplished without jQuery?
-
alanjds over 10 yearsBtw, is said that it does not work with IE7 and IE8. Anyway, worked in Chromium for me.
-
Jeffrey Simon over 10 yearsHow does the get(0) part of this work? For me, it works on the page where intended, but causes bad side effects on other pages.
-
Matt Skeldon over 9 years$(this).get(0) in this context is pointless. It makes a normal javascript object into a jquery object then gets the normal object straight back out. Just use this.type='password' instead.
-
Fi Horan about 7 yearsThat's a really elegant solution. I like the use of mouse up/down instead of a toggle.
-
JClaspill almost 7 years@candidJ Read the post. In 2011, JQuery did not have this ability.
-
Bryan Dimas over 6 yearsIt worked for me (to change the type from
hidden
toinitial
). Thanks! -
Fresz about 3 yearsWon't work if u plan on submitting the form. The field name would have to be the same and form will pick only value of the first or last input.