javascript - 输入字段的默认值“密码”，显示吗？

Question

我正在使用此 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" />

Answer 1

你想好了<input placeholder='Password' type='password'/>吗？

Answer 2

这是您的解决方案：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" />​

Answer 3

试试这个 - http://roshanbh.com.np/examples/text-in-password/

Answer 4

您需要创建一个纯文本输入作为占位符。此代码将为您执行此操作，而不会将任何变量暴露给全局范围：

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

Answer 5

请使用以下解决方案，

<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'}"/>

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