javascript - Disable password masking in password field - Stack Overflow

admin管理员组

文章数量:1430625

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>

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>

• javascript
• jquery
• html
• forms

Share Improve this question Follow asked Nov 11, 2011 at 18:21 NyxynyxNyxynyx 63.9k163163 gold badges507507 silver badges856856 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

You can simply use the HTML5 placeholder-attribute:

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

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

Best way to do it would be to not set default value as value of password field but as an overlay over password field which disappears on focus or when user changes value to something else. You can use the arelady existing jquery in-field-label plugins e.g.

http://www.viget./inspire/a-better-jquery-in-field-label-plugin/
http://fuelyourcoding./scripts/infield/
http://www.kryogenix/code/browser/labelify/

To hide password programatically add this line below oncreate android.provider.Settings.System.putInt(this.getContentResolver(),android.provider.Settings.System.TEXT_SHOW_PASSWORD, 0);

本文标签： javascriptDisable password masking in password fieldStack Overflow