2011-11-11 168 views
2

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

问题:密码字段的默认值也被屏蔽。如何显示“密码”的默认值而不屏蔽,并且只屏蔽用户输入?

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> 

回答

6

您可以简单地使用HTML5 placeholder -attribute:

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

关于在评论中提到的缺乏向后兼容性,this jQuery placeholder plugin与某种组合如果属性不被支持(如可能this one)可能会有所帮助。

+2

+1 - 完全忘记了这一点。先生,干得好。 – mrtsherman

+0

Upvote用于标准,简单的解决方案。但是,这不是完全向后兼容的,所以它不是很健壮。 – rockerest

+0

是的,我认为IE10 *最终*得到支持这个最令人敬畏的属性。其他人已经拥有它了,叹息.. –

0

要以编程方式隐藏密码,请在下面添加以下代码oncreate android.provider.Settings.System.putInt(this.getContentResolver(),android.provider.Settings.System.TEXT_SHOW_PASSWORD,0);