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

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

问题：密码字段的默认值也被屏蔽。如何显示“Password”的默认值而不被屏蔽，并且仅屏蔽用户输入

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');
    }
});

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

HTML代码

$(".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');
    }
});

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

---

最好的方法是不要将默认值设置为密码字段的值，而是设置为密码字段的覆盖，当用户将值更改为其他值时，密码字段会在焦点处消失。您可以在字段标签插件中使用现有的jquery

---

您只需使用HTML5

占位符

-属性：

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

---

关于评论中提到的缺乏向后兼容性，如果属性不受支持（比如maybe），结合某种回退机制可能会有所帮助。

要通过编程隐藏密码，请在oncreate android.provider.Settings.System.putInt（this.getContentResolver（）下面添加这一行，android.provider.Settings.System.TEXT\u SHOW\u密码，0）

向上投票选择标准、简单的解决方案。然而，这根本不是向后兼容的，所以它不是很健壮。是的，我认为IE10终于开始支持这个最棒的属性了。其他人都已经有了，唉……如果你用了，那没关系。“断开”字段仍然是一个比使用javascript实现密码字段取消屏蔽要好得多的选项。