密码字段的问题

Question

所以我有一个密码字段，值设置为 "Password." 我有一些非常简单的 javascript 将值设置为“onfocus”。我希望密码被屏蔽掉，像往常一样用点代替。问题是，如果我将该字段设置为密码字段，则原始值 "Password," 显示为点。有什么简单的方法可以使原始值 "Password" 和其余值在 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>

Answer 1

会更简单，直接用type='password':

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

Answer 2

您不需要 JavaScript。不过，请使用 placeholder attribute. Worst case, it's not supported and the field will just be empty. (It's widely supported now。

<input id="password" type="password" placeholder="Password">

Answer 3

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

如果您想按照开始的方式进行操作，请更改类型属性以在文本和密码之间切换：

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

Fiddle 这里：http://jsfiddle.net/1y7Levr4/

密码字段的问题

Problems with Password Fields

javascript

fonts

passwords

password-protection