Change placeholder input type text to password on focus jquery

Question

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

Solution 1

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 .

Solution 2

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/

Comments

[wolverene]

It worked. Although not as similar to the way I used input hints. Thanks!

[wolverene]

I tried it at the jsfiddle link. it works. but on a second try clicking on the input box, but having not typed anything, I clicked outside of the box and it said password has been entered when in fact I have not yet entered any yet. hmmm.

[wolverene]

Oh now I get it. When you click anywhere outside the box, what it meant was that you have just typed in something already and you don't need to do it again. This actually solved the jquery part. Gee, I wish I could choose two best answers here.