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

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

这是按钮的代码：

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

所有其他工作正常，但我希望用户密码不显示。现在，我将密码字段保留为文本

要查看it操作，请参见此处：

---

谢谢。

您可以使用javascript

setAttribute

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

范例

最后，我发现了一个错误，当输入密码时，在输入之前，我将焦点更改为另一个字段，然后返回密码，该字段被清除。它是从

---

onclick=“this.value=”

如果要处理onclick事件，只需删除

this.value='

，因为它在onfocus上工作，或者只需添加条件

if（this.value='password'）

，否则如果使用与onfocus相同的onclick事件，最好删除onclick事件处理程序，onfocus就足够了。

请记住以下几点：

• 密码字段应为

  input type='Password'

  ，允许浏览器应用不同的安全注意事项（例如不允许复制）。此外，出于可用性目的，触摸设备可选择性地显示/隐藏密码

• 最好不要将脚本内联。相反，我们更喜欢将自己附加到适当元素的不引人注目的JavaScript

• 人们使用各种输入机制

我建议使用带有功能检测的HTML

placeholder

属性，以便在不支持

placeholder

时修改显示

简单的例子：

//使用Modernizer库进行特征检测
if（！modernizer.input.placeholder）{
//改变你的标记
$（“输入[类型=密码]”）。在（“密码”）之后；
}

看看

但使用占位符也可以

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

您反对使用库吗？HTML5属性

占位符将使您的生活更加轻松。浏览器支持即将到来（即10、FF、Chrome、Safari）@TimMedora目前我应该使用什么？@Daedalus这是什么/它做什么？你肯定想继续使用
input type=password
；浏览器通常对此类输入有特殊的安全规则（例如，防止复制）。您可以为较新的浏览器添加
占位符
属性；较旧的浏览器将看不到任何内容（因此您可能希望在输入旁边添加标签）。。。哈我本来打算提供相同的库，但不知道如何使它在IE9中工作。
<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">