CODEWITHSUNDEEP
jqueryhtmlinputpasswordsplaceholder
wolverene
wolverene

Reputation: 255

Change placeholder input type text to password on focus jquery

Ok I have an input tag. I used jquery input hints so it displays the title="password". But if it's type is a password it wouldn't be displaying the the title it would simply just look *. So I need to put input as type"text" then change it to type:"password" on focus and back to text when it's out of focus. How do i do it with jquery?

<input name="pwd" type="text" class="pwd" value="" title="Password"/>
// look like below on focus and back to text on focus out
<input name="pwd" type="password" class="pwd" value="" title="Password"/>

Upvotes: 2

Views: 15945

Answers (2)

pete
pete

Reputation: 25081

Just change the input type via the .prop method in jQuery:

$(document).ready(function() {
    $('#passwordInput').focus(function() {
        $(this).prop('type', 'password').val('');
    });
});

Here's a fiddle: http://jsfiddle.net/7hVjV/

Upvotes: 2

Nelson Ben&#237;tez Le&#243;n
Nelson Ben&#237;tez Le&#243;n

Reputation: 50563

You can use the new html5 attribute placeholder, like so:

<input type="password" name="pass" placeholder="Enter your password" />​

You can see here the support for this attribute in browsers. As you see it lacks for IE 7, 8 and 9 , but if you want to support them check out this answer .

Upvotes: 9

Related Questions