掩码HTML密码输入

Question

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

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

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

希望你们得到我的问题。

非常感谢。

UPDATE

看起来我无法描述我“需要”的内容，所以这里有一些图片更新：

人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;
}