Changing Attribute "type" from text to password

44,721

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");
Share:
44,721

Related videos on Youtube

AndrewFerrara
Author by

AndrewFerrara

Updated on January 06, 2021

Comments

  • AndrewFerrara
    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
    JClaspill over 12 years
    Look 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
    AndrewFerrara over 12 years
    yes thats exactly what I'm going for... but this threw a wench it what I thought would be fairly simple
  • Hussein
    Hussein over 12 years
    @AndrewFerrara check my updated answer for focus blur solution
  • JClaspill
    JClaspill about 11 years
    I'm not sure why this keeps getting voted down... Anyone care to explain why I keep getting downvotes?
  • Adil Malik
    Adil Malik about 11 years
    Worked in chrome like a charm. Thanks.
  • José Fernandes
    José Fernandes almost 11 years
    Man, this was my "oh, I learned something today" moment for today. Many thanks!
  • Tom
    Tom almost 11 years
    it can! I do it all the time with Java Script.
  • owagh
    owagh almost 11 years
    because the question is about jquery and not javascript
  • owagh
    owagh almost 11 years
    because people are getting confused between jquery and javascript. maybe you can edit your answer to reflect that?
  • salmanhijazi
    salmanhijazi almost 11 years
    Awesome! Works like a charm.
  • David
    David almost 11 years
    Nice, but can this be accomplished without jQuery?
  • alanjds
    alanjds over 10 years
    Btw, is said that it does not work with IE7 and IE8. Anyway, worked in Chromium for me.
  • Jeffrey Simon
    Jeffrey Simon over 10 years
    How 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
    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
    Fi Horan about 7 years
    That's a really elegant solution. I like the use of mouse up/down instead of a toggle.
  • JClaspill
    JClaspill almost 7 years
    @candidJ Read the post. In 2011, JQuery did not have this ability.
  • Bryan Dimas
    Bryan Dimas over 6 years
    It worked for me (to change the type from hidden to initial). Thanks!
  • Fresz
    Fresz about 3 years
    Won'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.

Related