密码输入字段从文本更改为聚焦/类型的密码？ [英] Password input field change from text to password on focus/type?

问题描述

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

I have a sign up form where the titles of the inputs are in the text box, and when you click on the box, the text disappears, but on the password i want the preview text to remain as "password" and not "••••••••". BUT when the user clicks on the text box should clear out the text, and their entered text should apear as "•••••••".

这是

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

所有其他都很好，但我想用户密码不显示。现在我已将密码字段留作文本。

All else works fine but I would like the users passwords not to show up. Also for now I have left the password fields as text.

要查看其操作，请参阅此处： http://jsfiddle.net/e458S/

To see it action see here: http://jsfiddle.net/e458S/

感谢。

推荐答案

您可以使用javascript setAttribute

You can use 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'），否则如果使用onclick事件作为onfocus，更好的移除onclick事件处理程序，onfocus就够了。

Finally I found one mistake, when password is typed, and before it I change the focus to another field, and returning back to password, the field clears. It's from onclick="this.value=''"; if You want to handle event onclick just remove this.value='' because it works on onfocus, or just add the condition if(this.value=='password'), otherwise if use onclick event same as onfocus, better remove the onclick event handler, onfocus is enough.

这篇关于密码输入字段从文本更改为聚焦/类型的密码？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！