密码字段的问题答案

【问题标题】：Problems with Password Fields密码字段的问题
【发布时间】：2015-04-03 15:30:51
【问题描述】：

所以我有一个密码字段，其值设置为“密码”。我有一些非常简单的 javascript 将值设置为 '' onfocus。我希望像往常一样将密码屏蔽掉，用点代替。问题是，如果我将该字段设为密码字段，则原始值“密码”将显示为点。有没有什么简单的方法可以使原始值“密码”和其余的，在聚焦之后，点？还是我必须在 onfocus 之后将字体更改为只有点的自定义字体？

这是我的 HTML：

<!DOCTYPE html>
<html>
<head>
    <title>SuM BUTtonsS DOe</title>
    <link rel="stylesheet" href="buttons.css"/>
</head>
<body>
    <p>Please enter the password.</p>
    <form>
        <input id="password" type="textbox" value="Password" onfocus="if (this.value=='Password') this.value='';" onblur="if (this.value=='') this.value='Password';"/>
    </form>
</body>
</html>

【问题讨论】：

标签： javascript fonts passwords password-protection

【解决方案1】：

您不需要 JavaScript。使用placeholder 属性。最坏的情况是，它不受支持，并且该字段将为空。（不过是widely supported now）。

&lt;input id="password" type="password" placeholder="Password"&gt;

【讨论】：

只是想知道，有没有办法改变占位符文本的颜色/透明度？
stackoverflow.com/questions/2610497/…

【解决方案2】：

这样会更简单，只需使用 type='password'：

<input id="password" type="password" value="Password" />

【讨论】：

【解决方案3】：

最好的方法是使用 Toofy 在他的回答中所说的占位符。

如果你想按照你开始的方式来做，改变type属性在文本和密码之间切换：

<input id="password" type="textbox" value="Password" onfocus="if (this.value=='Password') { this.value='';this.setAttribute('type','password')};" onblur="if (this.value=='') { this.value='Password';this.setAttribute('type','text'); }"/>

在这里提琴：http://jsfiddle.net/1y7Levr4/

【讨论】：