我正在使用这个js来显示默认密码,当用户单击它时,它会自动清除默认值,如果用户取消选择而不输入任何默认值会重新出现。
我将其用于我的所有字段,但显然对于密码来说,它更棘手! :)
你会怎么做?
<input
type="password"
onblur="this.value=!this.value?'Password':this.value;"
onfocus="this.select()"
onclick="if (this.value=='Password'){this.value='';}"
name="pwd"
id="user_pass"
class="input"
value="Password"
size="20"
tabindex="20" />
你想<input placeholder='Password' type='password'/>
吗?
这是您的解决方案: http://jsfiddle.net/cgP5K/1/
<input
type="text"
onblur="this.value=!this.value?'Password':this.value;"
onfocus="this.select()"
onclick="if (this.value=='Password'){this.value=''; this.type='password'}"
name="pwd"
id="user_pass"
class="input"
value="Password"
size="20"
tabindex="20" />
试试这个 - http://roshanbh.com.np/examples/text-in-password/
您需要创建一个纯文本输入作为占位符。 此代码将为您执行此操作,而不会向全局范围公开任何变量:
<input id="pass-placeholder" type="text" value="Password" />
<script type="text/javascript">
(function(){
var pass_holder_el = document.getElementById('pass-placeholder');
var pass_el = document.createElement('input');
pass_el.type = 'password';
pass_el.onblur = function(){
if(!this.value)
this.parentNode.replaceChild(pass_holder_el, this);
}
pass_holder_el.onfocus = function(){
this.parentNode.replaceChild(pass_el, this);
pass_el.focus();
}
})();
</script>
JSFiddle
以下解决方案,
<input name="password" class="input"value="Password" size="20"
tabindex="20" onclick="if(this.value==defaultValue){this.value=''; this.type='password'} else if(this.value==''){this.value=defaultValue; this.type='text'} " onblur="if(this.value==''){this.value=defaultValue; this.type='text'}"/>
因为第一个解决方案效果很好,但是如果您清空密码字段,它将不会转换为其默认值,即文本。因此,请尝试上述解决方案。