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

【问题标题】：How to make dots on input PIN showing character amount to provide?如何在输入 PIN 上打点显示要提供的字符数量？
【发布时间】：2016-10-03 19:12:52
【问题描述】：

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

最好的方法是什么？

除了使用position: absolute 绘制圆圈并使用 js（在 keydown 或更改时）添加/删除它们之外，我还没有想出任何聪明的方法。但这可能会失败，因为字符宽度不同（例如 i 和 W）

【问题讨论】：

标签： javascript html css forms input

【解决方案1】：

因为@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>

所以我创建了没有边框和轮廓的输入。在它下方的底部有一个跨度 mask ，其中包含您想要的点。在蒙版上方有一个 hider，其中 angular 从输入中写入值，因此背景随内容上升并隐藏蒙版跨度中的点。

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

另外恕我直言，它可以轻松更改为 jQuery 选项，甚至可以更改为纯 javascript；

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

【讨论】：

【解决方案2】：

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

如果您不想画圆圈，则可以在每次输入新字符时使用 JavaScript 换掉项目符号 (•)。

【讨论】：

【解决方案3】：

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

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

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

【讨论】：