Question

I want creating form field hints where the default value shows ‘Password’ and on focus, it goes away. If the field loses focus with no use input, it will reveal back to the default value of ‘Password’.

Problem: The default value for the password field gets masked as well. How can I show the default value of ‘Password’ without getting masked, and masks only the user input?

jQuery Code

$(".splash_register_short_input, .splash_register_long_input").each(function() {
    $(this).val( $(this).attr('title') );
});

$(".splash_register_short_input, .splash_register_long_input").focus(function() {
    if($(this).val() == $(this).attr('title')) {
        $(this).val('');
    }
});

$(".splash_register_short_input, .splash_register_long_input").blur(function() {
    if($(this).val() == '') { // If there is no user input
        $(this).val($(this).attr('title'));
        $(this).removeClass('splash_register_have_userinput');
    } else {    // If there is user input
        $(this).addClass('splash_register_have_userinput');
    }
});

HTML Code

<form id="splash_register_traditional_form">
    <input type="text" name="register_first_name" class="splash_register_short_input" title="First Name" /><label for="register_first_name"></label>
    <input type="text" name="register_last_name" class="splash_register_short_input" title="Last Name" /><label for="register_last_name"></label>
    <input type="text" name="register_email" class="splash_register_long_input" title="Email" /><label for="register_email"></label>
    <input type="password" name="register_password" class="splash_register_long_input" title="Password" /><label for="register_password"></label>
    <input type="submit" id="splash_register_signup_button" value="Sign up" />
</form>

Answer 1

You can simply use the HTML5 placeholder-attribute:

<input type="password" placeholder="Enter Password..." />

Concerning the lack of backwards compatibility as mentioned in the comments, this jQuery placeholder plugin combined with some kind of a fallback machanism in case the attribute is not supported (like maybe this one) may be helpful.