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

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

输入字段的默认值'password'，显示出来？

5 个答案: