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

Question

我有一个注册表单,其中输入的标题位于文本框中,当您单击该框时,文本消失,但是在密码上我希望预览文本保留为"密码"而不是"•• ••••••".但是当用户点击文本框时应该清除文本,并且输入的文本应该是"•••••••".

这是按钮的代码:

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

谢谢.

Answer 1

你可以使用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就足够了.