输入字段的默认值“密码”，显示它

default value 'password' for input field, show it?

本文关键字：显示 密码 字段 默认值 输入      更新时间：2023-09-26

我正在使用这个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'}"/>

因为第一个解决方案效果很好，但是如果您清空密码字段，它将不会转换为其默认值，即文本。因此，请尝试上述解决方案。

相关文章：