更改 HTML 密码字段中显示的符号

Posted 2023-02-24

【中文标题】更改 HTML 密码字段中显示的符号

【英文标题】：Changing the symbols shown in a HTML password field

【发布时间】：2010-12-11 13:03:19

【问题描述】：

有什么方法可以更改出现在 html 密码字段中的星号 (*) 或在某些浏览器中显示的项目符号 (•)？

【问题讨论】：

见github.com/Mottie/input-password-bullet

【参考方案1】：

您无法更改标准密码字段中的密码掩码字符。您可以使用文本框来伪造它，但它会导致安全模型较弱，因为您无法从密码文本框获得保护。附带说明一下，更改此类项目的行为通常不是一个好主意，因为用户已经习惯了一种形式的掩码，而您将引入另一种形式 - 如果没有充分的理由这样做，我避免它。

【讨论】：

我怎样才能用文本框伪造它，但是我没有使用这个功能来输入密码，请检查问题***.com/questions/31604402/…

您究竟从密码字段中获得了什么保护？据我所知，这只是另一个可以使用 devtools 轻松更改的元素。除了浏览器使用保存的凭据自动填充字段外，密码字段周围没有任何安全性。我错过了什么吗？

@GuidoVisser 你说得对。除此之外，有时我不想显示保存的密码，也没有办法为所有主要浏览器禁用它。

【参考方案2】：

否 - 用户代理选择自己的默认样式，并且（据我所知）没有任何 CSS 属性可以更改以确定掩码字符。

当然，如果密码字段只是一个标准文本字段，并且您使用 javascript 事件处理程序（可能是 onKeyPress）手动屏蔽输入，这将是可能的。您甚至可以在 HTML 中将该字段声明为 type="password"，然后让您的 JS 函数修改 DOM 以更改其类型。不过，我会对此有点警惕；浏览器的实现几乎可以肯定是相当可靠的，绕过已建立的安全功能来自行开发并不是一个好主意。

【讨论】：

已建立安全功能？ HTML 中的密码和文本输入字段大致相同，只是 UI 发生了变化，而屏蔽发生在密码字段中。我并没有否决你的答案，但这不像重新发明***或创建自制加密引擎，它只是修补一个 UI 元素以满足你的喜好。

@Spidey，除了字符掩码外，密码字段还可以防止从中复制内容，具体取决于浏览器和操作系统。

@MicahHenning 感谢您指出这一点。无论如何，即使用户尝试从自定义文本框中复制，他得到的只是星号或点或您选择掩盖真实密码的任何其他符号。

【参考方案3】：

到目前为止，这似乎在 webkit 浏览器中是可能的。有关示例和文档，请参阅 http://help.dottoro.com/lcbkewgt.php。

不适用于密码输入

<input type="text" style="-webkit-text-security: square;" />

截至撰写此答案时，其他浏览器没有好的解决方案，即使在 webkit 浏览器中，您可以指定的字符也非常有限。

【讨论】：

这不起作用。我在 4 种不同的浏览器上对其进行了测试。

已更新。谢谢@OleHaugset。

【参考方案4】：

创建您自己的字体并将@font-face 和font-family（和font-size）用于input[type="password"]。它应该有助于解决您的问题。但是...您必须使用替换的项目符号和星号字符创建字体。字体中的所有字符编号可能代表相同的字符。用google找到免费的程序来编辑矢量字体。

永远不要说“这是不可能的”。您应该找到解决问题的方法。

要替换为您的符号的字符（对于 Chrome、Firefox 和 MSIE）： 26AB、25E6、25CF、25D8、25D9、2219、20F0、2022、2024、00B7、002A。

(18C)

【讨论】：

你有示例字体要分享吗？

这应该是完美的答案...谢谢伙计...解决了我的问题

@waLLe：女人不是男人……人们很少想到抽象和多层次的行为。顺便提一句。这个问题很老（2009）但仍然活跃。过去没有定义@font-face。在 2009 年这是不可能的，但是……人们重复这个答案，尽管 Firefox 从 v3.5 开始支持它，IE 可能从 v6 开始，Chrome 从 v4 开始。但是仍然... Opera Mini 不支持。当我写下我的答案时，主要答案有 +21 分。

@18C .. 嘿，女士，你的 id 18c 无法猜出性别。使用概率平衡，我说“男人”......对不起......无论如何，谢谢你的解释.. :)

@waLLe：然后使用通用和自然的“你”。英文没问题。

【参考方案5】：

<input type="text" style="-webkit-text-security: circle;" />

【讨论】：

CSS 属性 -webkit-text-security 在 IE、Firefox 或 Opera 上不起作用。

另外这个属性不支持任意字符；它只为您提供四个沿圆形和方形线的选项。

【参考方案6】：

我知道这是一个非常古老的问题，但我今天遇到了这个问题，我使用这种方法解决了它：https://github.com/Mottie/input-password-bullet

基本上，我创建了一个新字体，将默认点分配给另一个图标。然后，只需要将字体文件导入到项目中并添加一个类似这样的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;

希望这会有所帮助！

【讨论】：

非常有帮助！