Question

I have a text input which has a default value “password”.

When the user clicks this field, i.e. when the focus is set to this textfield, I would like to change the input type to password..

I have tried this using jQuery, but no joy:

$("#passwordtxt").click(function(e){
    e.stopPropagation();
    if($("#passwordtxt").val() == "Password"){    
      $("#passwordtxt").val("");      
    }
    $("#passwordtxt").attr('type','password');
});

Here is the HTML it applies to:

<form name = "loginform" action = "get_login.php" method = "post">
   <input id = "emailtxt" name = "username" type="text" size="25" value = "E-mail"/>
   <input id = "passwordtxt" name = "password" type="text" size="25" value = "Password"/>                                    
</form>

RESULT: It doesn’t change the type to password, it just stays as text…

Answer 1

A better solution would be to use the placeholder property which will achieve exactly what you want without fussing over changing the type of the input box.

otherwise you will want to address the property as a property and not as a attribute using:

.prop("type", "password");