掩码HTML密码输入

Question

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

• 人1:29 = **
• 人2：587 = ***

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

希望你们提出我的问题。

非常感谢。

更新

看起来我无法描述我需要的东西＆＃34;所以这里有一些图片的更新：

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

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

我的目标是输入始终如下：

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

Answer 1

执行此操作的一种方法是使用change事件更新状态变量。 这是jquery的一个例子。 （并假设总是显示4个星号）

var entered = "";

$("#my-input").change(function() {
    var newVal = $("#my-input").val();
    if (newVal.length < 4) {
        //backspace was pressed
        entered = entered.substr(0, entered.length - 1);
    } else if (newVal.length > 4) {
        //another key was pressed
        entered += newVal.substr(4);
    }
    $("#my-input").val("****");
});

$("#my-input").val("****");

这并非万无一失，如果用户选择，复制，粘贴，它将会崩溃。等

虽然这会让你得到你所要求的效果，正如其他评论所暗示的那样，它可能不是最好的用户体验。

Answer 2

这是一个非常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隐藏文字

Answer 3

您还可以使用CSS使文本颜色与输入字段相同：

input[type=password] {
    color: white;
}

编辑：或者像@GeraldSchneider一样独立于输入颜色评论：

input[type=password] {
    color: transparent;
}