如何在输入字段中仅显示一个密码项目符号？答案

【问题标题】：How to show only one password bullet in an input field?如何在输入字段中仅显示一个密码项目符号？
【发布时间】：2026-02-07 03:35:01
【问题描述】：

这是一个简单的输入字段

<input type="password">

在数据输入期间，每个字符都以项目符号显示（字符数 = 项目符号数）。

// "password" = ********

如何在输入更多字符的情况下只显示一个项目符号？通过使用干净的 JS 或/和 CSS。

// "password" = *

【问题讨论】：

你为什么要这样做？用户怎么知道他们没有用过密码，或者他们的击键是否在注册？
我强烈建议您不要这样做。 如果“客户”或您的“老板”逼着您这样做，请尽可能回击（将他们指向这些cmets，例如）。创造糟糕的用户体验是个坏主意。实现起来也很痛苦，这样做可能会导致错误，包括可访问性错误和其他类型的错误。

【解决方案1】：

您可以在输入元素的末尾添加一个填充来隐藏除一个 * 之外的所有内容：

input {
  width: 50px;
  padding-right: 40px;
  box-sizing: border-box;
}

&lt;input type="password" value="Correct horse battery staple" /&gt;

你为什么要这样做我无法理解，但它确实有效。

实际上，运行它立即向我展示了这个想法的第一个问题：我的密码管理器在输入字段上的按钮足够大，可以完全覆盖第一个字符。

【讨论】：