在 index.html 中输入密码时如何显示星号
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11929138/
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
How to present asterisk when entering a password in index.html
提问by JAN
Using that code :
使用该代码：
<!-- THIS IS WHERE IT ALL STARTS -->
<!DOCTYPE html>
<html>
<head><title>Bank application</title>
<link rel="stylesheet"
href="./css/styles.css"
type="text/css"/>
</head>
<body>
<table class="title">
<tr><th>Web Bank application</th></tr>
</table>
<br/>
<fieldset>
<legend>Login Page - please enter your Username and Password</legend>
<form action="loginPage">
Username: <input type="text" name="username"><br>
Password : <input type="text" name="password"><br>
<input type="submit" value="Login">
</form>
</fieldset>
<br/>
<br/>
<br/>
<br/>
<br/><br/><br/><br/><br/><br/>
</body></html>
The user enters his username and password
用户输入他的用户名和密码
How can I present to the screen asterisks (*)when I enter the password , e.g. instead of showning myPassword, I want to present **********, and keep the actual characters of the string myPasswordin tact ?
(*)当我输入密码时，我怎样才能在屏幕上显示星号，例如myPassword，我想显示**********并保持字符串的实际字符完整，而不是显示myPassword？
Thanks
谢谢
回答by Eric Yin
<input type="password" name="password">
<input type="password" name="password">
回答by Jigar Joshi
change it to
将其更改为
<input type="PASSWORD" name="password">
Specifications
规格
回答by Borniet
When working with passwords, use the input type="password" instead of text. The format is the same, it will just tell the browser that you want your user to enter a password in it, or other sensitive data, that should be hidden from weary eyes. So the browser will not show the typed characters (or just briefly), but will show asterisks instead.
使用密码时，请使用输入 type="password" 而不是文本。格式是相同的，它只会告诉浏览器您希望您的用户在其中输入密码或其他敏感数据，这些数据应该是隐藏起来的。所以浏览器不会显示输入的字符（或只是简单地），而是会显示星号。
Username: <input type="text" name="username"><br>
Password : <input type="password" name="password"><br>
回答by WEBjuju
Right, @eric-yin has the correct answer: An inputwith type="password"masks the password.
是的，@eric-yin 有正确的答案：An inputwithtype="password"掩码密码。
Nevertheless, Like @beefchimi, i needed: a password field that can:
尽管如此，像@beefchimi 一样，我需要：一个密码字段，它可以：
- Show asterisks in every browser
- Show the final character without an asterisk
- 在每个浏览器中显示星号
- 显示不带星号的最后一个字符
So i wrote this jQuery plugin:
所以我写了这个 jQuery 插件：
$.fn.betta_pw_fld = function(pwfld_sel, hiddenfld_sel) {
// this is the form the plugin is called on
$(this).each(function() {
// the plugin accepts the css selector of the pw field (pwfld_sel)
var pwfld = $(this).find(pwfld_sel);
// on keyup, do the masking visually while filling a field for actual use
pwfld.off('keyup.betta_pw_fld');
pwfld.on('keyup.betta_pw_fld', function() {
// if they haven't typed anything...just stop working
var pchars = $(this).val();
if (pchars == '') return;
// we'll need the hidden characters too (for backspace and form submission)
var hiddenfld = $(this).parents('form').find(hiddenfld_sel);
var hchars = hiddenfld.val();
// use these placeholders to build our password values
// this one will have all asterisks except the last char
var newval = '';
// this one will have the actual pw in it, but we'll hide it
var newhpw = '';
// in this block, we're in a "keydown" event...
// let's get the characters entered
// loop over them and build newval and newhpw appropriately
for (i=0; i<pchars.length - 1; i++) {
if (pchars[i] == '*') {
newhpw += hchars[i];
} else {
newhpw += pchars[i];
}
newval += '*';
}
// we want to see the last character...
var lastchar = pchars[pchars.length - 1];
if (lastchar == '*') {
newval += hchars[pchars.length - 1];
newhpw += hchars[pchars.length - 1];
} else {
newval += pchars[pchars.length - 1];
newhpw += pchars[pchars.length - 1];
}
// set the updated (masked), visual pw field
$(this).val(newval);
// keep the pw hidden and ready for form submission in a hidden input
hiddenfld.val(newhpw);
});
});
};
The html might be:
html 可能是：
<form id="myForm">
<label for="pw">Type password:</label><br>
<input name="pw" class="stylishPassword" type="text"><br>
<input class="hiddenPassword" type="hidden">
</form>
And at document.ready, or appropriate time, the plugin is instantiated like this:
并且在document.ready，或适当的时候，插件被实例化如下：
$('#myForm').betta_pw_fld('.stylishPassword', '.hiddenPassword')
Visit the Better Password Field jQuery Plugin Codepenand then please remember to vote it up if it helps you.
访问Better Password Field jQuery Plugin Codepen，如果它对你有帮助，请记得投票。
