更改 HTML 密码字段中显示的符号
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1648665/
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
Changing the symbols shown in a HTML password field
提问by Jimvanz
Is there any way to change the asterisks (*), or in some browsers a bullet (?), that appears in password fields in HTML?
有什么方法可以更改出现在 HTML 密码字段中的星号 ( *) 或某些浏览器中的项目符号 ( ?) 吗？
回答by 18C
Create your own font and use @font-faceand font-family(and font-size) for input[type="password"]. It should help to solve your problem. But... you must create font with replaced bullet and asterisk character. All character numbers in font may represent the same character. Use google to find free program to edit vector fonts.
创建您自己的字体并使用@font-face和font-family（和font-size）为input[type="password"]. 它应该有助于解决您的问题。但是...您必须使用替换的项目符号和星号字符创建字体。字体中的所有字符编号可以代表同一个字符。使用谷歌查找免费程序来编辑矢量字体。
Never say "it is impossible".You should find a hack for your problem.
永远不要说“这是不可能的”。你应该为你的问题找到一个黑客。
Characters to be replaced with your symbol (for Chrome, Firefox and MSIE): 26AB, 25E6, 25CF, 25D8, 25D9, 2219, 20F0, 2022, 2024, 00B7, 002A.
要替换为您的符号的字符（适用于 Chrome、Firefox 和 MSIE）：26AB、25E6、25CF、25D8、25D9、2219、20F0、2022、2024、00B7、002A。
(18C)
(18C)
回答by Pete OHanlon
You can't change the password masking character in the standard password field. You can fake it with a textbox, but it makes for a weak security model because you don't get the protection you do from the password textbox. As a side note, it's generally not a good idea to change the behaviour of items like this because users have become used to one form of masking, and you will be introducing a different one - if there's no good reason to do this, I'd avoid it.
您无法更改标准密码字段中的密码屏蔽字符。您可以使用文本框伪造它，但它会导致安全模型较弱，因为您无法从密码文本框获得保护。作为旁注，改变这样的项目的行为通常不是一个好主意，因为用户已经习惯了一种形式的掩码，你将引入另一种形式 - 如果没有充分的理由这样做，我' d 避免它。
回答by www139
As of now, it appears as though this is possible in webkit browsers. Please see http://help.dottoro.com/lcbkewgt.phpfor examples and documentation.
到目前为止，这似乎在 webkit 浏览器中是可能的。有关示例和文档，请参阅http://help.dottoro.com/lcbkewgt.php。
Does not apply to password input
不适用于密码输入
<input type="text" style="-webkit-text-security: square;" />There is no good solution for other browsers as of when this answer was written and even in webkit browsers, the characters you are allowed to specify are very limited.
截至撰写此答案时，其他浏览器没有好的解决方案，即使在 webkit 浏览器中，您可以指定的字符也非常有限。
回答by Isaac Bosca
I know that is a very old question, but I faced this problem today, and I solved it using this approach: https://github.com/Mottie/input-password-bullet
我知道这是一个非常古老的问题，但我今天遇到了这个问题，我使用这种方法解决了它：https: //github.com/Mottie/input-password-bullet
Basically, I created a new font where assign the default point, to another icon. Then, only need to import the font files to the project and add a css similar to this:
基本上，我创建了一个新字体，其中将默认点分配给另一个图标。然后，只需要将字体文件导入到项目中，并添加一个类似这样的css：
@font-face {
font-family: 'fontello';
src: url('/fonts/fontello.eot');
src: url('/fonts/fontello.eot') format('embedded-opentype'),
url('/fonts/fontello.woff') format('woff'),
url('/fonts/fontello.ttf') format('truetype'),
url('/fonts/fontello.svg') format('svg');
font-weight: normal;
font-style: normal;
}
input[type="password"] {
font-family: "fontello";
font-style: normal;
font-weight: normal;
speak: none;
color: red;
font-size: 16px;
/* For safety - reset parent styles, that can break glyph codes*/
font-variant: normal;
text-transform: none;
/* Font smoothing. That was taken from TWBS */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Uncomment for 3D effect */
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
/* add spacing to better separate each image */
letter-spacing: 2px;
}Hope this helps!
希望这可以帮助！
回答by Andrzej Doyle
No - the user agent chooses its own default style, and there is (to my knowledge) no CSS attributes you can change to determine the masking character.
不 - 用户代理选择自己的默认样式，并且（据我所知）没有可以更改的 CSS 属性来确定掩码字符。
Of course, this would be possible if the password field was just a standard text field, and you manually masked the input with a javascript event handler (onKeyPress, probably). You could even declare the field as type="password"in the HTML, then have your JS function modify the DOM to change its type. I'd be a little wary about doing this, though; the browser implementation is almost certainly pretty solid, and circumventing established security functionality to roll your own is rarely a good idea.
当然，如果密码字段只是一个标准文本字段，并且您使用 javascript 事件处理程序（可能是 onKeyPress）手动屏蔽输入，那么这将是可能的。您甚至可以像type="password"在 HTML 中一样声明该字段，然后让您的 JS 函数修改 DOM 以更改其类型。不过，我对这样做有点谨慎；浏览器的实现几乎可以肯定是非常可靠的，绕过既定的安全功能来推出自己的功能很少是一个好主意。
回答by Joseph Eduardo Mejia Laos
<input type="text" style="-webkit-text-security: circle;" />