如何在输入PIN上显示点，显示要提供的字符数量？

Question

我需要创建带有显示所需字符数量的点的输入，并在提供字符时隐藏其他字符：

这样做的最佳方式是什么？

我还没有想出任何聪明的东西，但是用position: absolute绘制圆圈并用js添加/删除它们（在keydown或更改时）。但由于字符宽度不同（例如i和W）

，这可能会失败

Answer 1

如果将输入字段的font-family设置为等宽字体，例如Courier，则每个字符的大小都相同。然后，您可以根据ch单位调整点的大小。 1ch是0字符的宽度（因此是等宽字体中的每个字符）。

如果您不想绘制圆圈，则每次输入新字符时，您都可以使用JavaScript来换出子弹（•）。

Answer 2

我认为您最简单，最干净的方法可能是实现类似MasekdInput的方法。查看底部的演示部分。

它是一个JQuery插件，可以将占位符放入输入中，并允许您指定占位符字符。默认情况下它是_，但您可以通过执行以下操作轻松将其更改为• ...

   $("#myTextField").mask("*****",{placeholder:"•"});

Answer 3

因为@Santi用jQuery为你提出了解决方案，所以我做了一个jsFiddle with usage of angular。

<div ng-controller="MyCtrl">
  <span class="mask">•••••</span>
  <span class="hider">{{val}}</span>
  <input type="text" class="code" ng-model="val" maxlength="5" />
</div>

所以我创建了没有边框和轮廓的输入。 在它底部的底部有一个跨度面具，它有你想要的点。在上面的掩码中有一个 hider ，其中angular从输入中写入值，因此背景随着内容而上升并隐藏掩码跨度中的点。

如果你在项目中使用angular，你可能会将我的jsFiddle改为指令。

另外恕我直言，它可以很容易地改为jQuery选项，甚至是纯粹的javascript;

PS。请尊重我，因为我在css方面不是最好。