Question

我想创建表单字段提示，其中默认值显示“密码”，在焦点上，它会消失。如果该字段在没有使用输入的情况下失去焦点，它将显示回默认值“密码”。

问题：密码字段的默认值也会被屏蔽。如何在不屏蔽的情况下显示“密码”的默认值，并仅屏蔽用户输入？

jQuery代码

$(".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代码

<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

您只需使用HTML5 placeholder - 属性：

即可

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

关于评论中提到的缺乏向后兼容性，this jQuery placeholder plugin结合某种后备机制，以防该属性不受支持（如this one}可能会有帮助。

Answer 2

最好的方法是不将默认值设置为密码字段的值，而是设置为覆盖密码字段，该字段在焦点上消失或者当用户将值更改为其他值时。您可以使用arelady现有的jquery in-field-label插件，例如

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

Answer 3

要以编程方式隐藏密码，请在下面添加以下行：oncreate android.provider.Settings.System.putInt（this.getContentResolver（），android.provider.Settings.System.TEXT_SHOW_PASSWORD，0）;

在密码字段中禁用密码屏蔽

3 个答案: