javascript 密码输入字段在焦点/类型上从文本更改为密码？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15305389/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Password input field change from text to password on focus/type?
提问by Harrison Howard
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 "???????".
我有一个注册表单，其中输入的标题在文本框中，当您单击该框时，文本会消失，但是在密码上，我希望预览文本保留为“密码”而不是“?? ？？？？？？”。但是当用户点击文本框时应该清除文本，他们输入的文本应该显示为“???????”。
This is the code for the buttons:
这是按钮的代码：
<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.
其他一切正常，但我希望用户密码不要出现。此外，现在我将密码字段保留为文本。
To see it action see here: http://jsfiddle.net/e458S/
要查看它的操作，请参见此处：http: //jsfiddle.net/e458S/
Thanks.
谢谢。
回答by Vahe Shadunts
You can use javascript setAttribute
你可以使用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>
Example here
示例在这里
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.
最后我发现了一个错误，当输入密码时，在它之前我将焦点转移到另一个字段，并返回密码，该字段清除。它来自
onclick="this.value=''";如果你想处理 onclick 事件，this.value=''因为它适用于 onfocus ，或者只是添加条件if(this.value=='password')，否则如果使用与 onfocus 相同的 onclick 事件，最好删除 onclick 事件处理程序，onfocus 就足够了。
回答by Tim Medora
Keeping in mind the following:
牢记以下几点：
Password fields should be of
input type='password', which allows the browser to apply different security considerations (such as not allowing copying). In addition, touch devices may selectively offer to show/hide the password for usability purposes.Preferably, scripts should not be inline. Instead, prefer unobtrusive JavaScript which attaches itself to the appropriate elements.
People use all sorts of input mechanisms.
密码字段应该是
input type='password'，这允许浏览器应用不同的安全考虑（例如不允许复制）。此外，出于可用性目的，触摸设备可以选择性地提供显示/隐藏密码。最好，脚本不应该是内联的。相反，更喜欢将自身附加到适当元素的不显眼的 JavaScript。
人们使用各种输入机制。
I suggest the HTML placeholderattribute with feature detection to allow you to modify the display if placeholderis not supported.
我建议使用placeholder带有特征检测的 HTML属性，以便您在placeholder不支持的情况下修改显示。
Simple example: http://jsfiddle.net/fbw7j/3/
简单示例：http: //jsfiddle.net/fbw7j/3/
<input type="password" placeholder="enter a password">
// feature detection using the Modernizr library
if(!Modernizr.input.placeholder){
// alter your markup
$("input[type=password]").after("<span>Password</span>");
}
回答by kantor
look at http://jsfiddle.net/e458S/39/
看看http://jsfiddle.net/e458S/39/
<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"/>
but usage with placeholder is fine too.
但与占位符一起使用也很好。
<input type="password" placeholder="enter a password">
