javascript - 屏蔽 HTML 密码输入

Question

我确实有一个不寻常的请求，我正在开发一个应用程序，其中两个人必须在同一屏幕上的 input[type=password] 中输入 1 到 1000 之间的随机数 - 现在我正在寻找一种方法来隐藏在密码字段中输入了多少数字，f.e.

• 第 1 个人:29 = **
• 第 2 个人:587 = ***

我正在寻找一种始终显示 **** 的方法

希望你们明白我的问题。

非常感谢。

更新

看来我无法描述我“需要”的东西，所以这里有一些图片更新:

第 1 个人输入数字 32，这将如下所示:

第 2 个人输入数字 325，这将如下所示:

我的目标是输入始终如下所示:

我只想更改字段的外观，而不是值。

Answer 1

这是一个非常 hacky 的 css 方式，不确定浏览器支持，但不需要 JavaScript!

Codepen

HTML

<div class="test">
  <span>&middot;&middot;&middot;&middot;</span>
  <input type="password" />
</div>

CSS

.test{
  position:relative;
}
.test span{
  position:absolute;
  z-index:1;
  padding:5px; /** Match the input padding **/
  font-size:2em;
  line-height:.6em
}
input{
  z-index:0;
  text-indent:-9999px; /** Hide the text typed in **/
}

本质上只是 absolute 将点定位在输入上，然后通过 text-indent 隐藏文本