密码输入字段在焦点/类型上从文本更改为密码？答案

【问题标题】：Password input field change from text to password on focus/type?密码输入字段在焦点/类型上从文本更改为密码？
【发布时间】：2013-02-24 16:04:52
【问题描述】：

我有一个注册表单，其中输入的标题在文本框中，当您单击该框时，文本会消失，但是在密码上，我希望预览文本保持为“密码”而不是“••••••••”。但是当用户点击文本框时应该清除文本，他们输入的文本应该显示为“•••••••”。

这是按钮的代码：

<form method="post" action="register_process.php">
    <input type="text" class="button" value="USERNAME" onclick="this.value='';this.onclick='test';this.style.color='#000';" onfocus="if (this.value == 'USERNAME') {this.value = '';}" onblur="if (this.value == '') {this.value = 'USERNAME';}" name="username"  />
    <input type="text" class="button" value="EMAIL" onclick="this.value='';this.onclick='test';this.style.color='#000';" onfocus="if (this.value == 'EMAIL') {this.value = '';}" onblur="if (this.value == '') {this.value = 'EMAIL';}" name="email"  />
    <input type="text" class="button" value="PASSWORD" onclick="this.value='';this.onclick='test';this.style.color='#000';" onfocus="if (this.value == 'PASSWORD') {this.value = '';}" onblur="if (this.value == '') {this.value = 'PASSWORD';}" name="password"  />
    <input type="text" class="button" value="PASSWORD CONFIRM" onclick="this.value='';this.onclick='test';this.style.color='#000';" onfocus="if (this.value == 'PASSWORD CONFIRM') {this.value = '';}" onblur="if (this.value == '') {this.value = 'PASSWORD CONFIRM';}" name="password_confirm"  />    <br/>
    <input type="submit" class="button" value="JOIN!" name="join!"  />
</form>

其他一切正常，但我希望用户密码不要显示。现在我也将密码字段保留为文本。

要查看它的操作，请参见此处：http://jsfiddle.net/e458S/

谢谢。

【问题讨论】：

你反对使用库吗？
HTML5 属性placeholder 会让您的生活更轻松。浏览器支持即将到来（IE 10、FF、Chrome、Safari）
@TimMedora 暂时用什么？
@Daedalus 那是什么/它有什么作用？
你肯定想继续使用input type=password;浏览器通常对此类输入有特殊的安全规则（例如，防止复制）。您可以为较新的浏览器添加 placeholder 属性；较旧的浏览器将看不到任何内容（因此您可能需要在输入旁边添加标签）。

标签： javascript html css passwords

【解决方案1】：

你可以使用javascriptsetAttribute

<form method="post" action="register_process.php">
   <input type="text" class="button" value="USERNAME" onclick="this.value='';this.onclick='test';this.style.color='#000';" onfocus="if (this.value == 'USERNAME') {this.value = '';}" onblur="if (this.value == '') {this.value = 'USERNAME';}" name="username"  />
   <input type="text" class="button" value="EMAIL" onclick="this.value='';this.onclick='test';this.style.color='#000';" onfocus="if (this.value == 'EMAIL') {this.value = '';}" onblur="if (this.value == '') {this.value = 'EMAIL';}" name="email"  />
   <input type="text" class="button" value="PASSWORD" onclick="this.value='';this.onclick='test';this.style.color='#000'; setAttribute('type', 'password');" onfocus="if (this.value == 'PASSWORD') {this.value = ''; setAttribute('type', 'password');}"   onblur="if (this.value == '') {this.value = 'PASSWORD';setAttribute('type', 'text');}" name="password"  />
   <input type="text" class="button" value="PASSWORD CONFIRM" onclick="this.value='';this.onclick='test';this.style.color='#000'; setAttribute('type', 'password');" onfocus="if (this.value == 'PASSWORD CONFIRM') {this.value = ''; setAttribute('type', 'password');}" onblur="if (this.value == '') {this.value = 'PASSWORD CONFIRM'; setAttribute('type', 'text');}" name="password_confirm"  />   <br/>
   <input type="submit" class="button" value="JOIN!" name="join!"  />
</form>

例如here

最后我发现一个错误，当输入密码时，在它之前我将焦点转移到另一个字段，然后返回密码，该字段清除。来自于 onclick="this.value=''";如果你想处理onclick事件只需删除this.value=''，因为它适用于onfocus，或者只是添加条件if(this.value=='password')，否则如果使用与onfocus相同的onclick事件，最好删除onclick事件处理程序，onfocus就足够了。

【讨论】：

【解决方案2】：

记住以下几点：

密码字段应该是input type='password'，这允许浏览器应用不同的安全考虑（例如不允许复制）。此外，出于可用性目的，触摸设备可能会选择性地显示/隐藏密码。
最好不要内联脚本。相反，更喜欢将自身附加到适当元素的不显眼的 JavaScript。
人们使用各种输入机制。

我建议使用带有特征检测的 HTML placeholder 属性，以便在不支持 placeholder 时修改显示。

简单示例：http://jsfiddle.net/fbw7j/3/

<input type="password" placeholder="enter a password">

// feature detection using the Modernizr library
if(!Modernizr.input.placeholder){
    // alter your markup
    $("input[type=password]").after("<span>Password</span>");
}

【讨论】：

.. 哈。我打算提供相同的库，但不知道如何使它在 IE9 中工作。

【解决方案3】：

看http://jsfiddle.net/e458S/39/

<input type="text" class="button" value="PASSWORD-OK" onclick="this.value='';this.onclick='test';this.style.color='#000';" onfocus="if (this.value == 'PASSWORD-OK') {this.value = ''; this.type='password';}" onblur="if (this.value == '') {this.value = 'PASSWORD-OK'; this.type='text';}" name="password"/>

但与占位符一起使用也很好。

<input type="password" placeholder="enter a password">

【讨论】：