javascript - 支付宝的支付密码输入框该如何做？

Question

如图，怎么用html、css、js来实现这种输入框？

Answer 1

终于搞出来了，我是这样做的：

1. 获取需要变成该输入框的input框的实际宽度。

2. 获取输入框的maxlength参数。（设置最大为8，最小为3）

3. 获取原始框的父元素，在父元素里插入一个p，将input框隐藏并插入到该p里。

4. 实例化maxlength个input框插入p，每个input框中间插一个i标签。input无左右边框，i只有虚线右边框。美化样式。

5. 设置一个计数器active，初始化指向当前的第一个input框下标。

6. 给每个input框添加click事件，触发时强制光标focus到第active框，及当前的第一个空白框。

7. 给每个input框添加focus事件，触发时添加监听keyup事件。

8. 给每个input框添加blur事件，触发时移除元素的keyup事件。

9. keyup事件触发时，获取键盘键值，键盘键值为数字的则写入并且计数器active加1，否则不写入，当为退格时删除当前元素的值并且计数器active减1。

10. keyup执行之后触发一个回调函数，获取所有input的值写入隐藏的input框，判断active的值是否超出边界，超出边界则置为边界值，手动触发当前计数器指向的input的click事件。

已经封装成一个jquery插件，测试修改后会上传到我的github上，这也是我第一次写jquery插件，不足之处还望大家指出。

Answer 2

后面的线可以作为背景图片。。。。输入的时候控制字符间距

Answer 3

想到三个方法：
一：用背景图片来做，在整个input后面加个背景（包含那个线），然后设置input的css的 letter-space 来调整字符之间的间距。
二：在包含输入框的外层容器内加一个p，在里面做处理之后吧她绝对定位到input的下层。
三：把一个输入框拆成6个，然后设置border-right，在拼装起来

Answer 4

先看效果吧：只能输入数字，输入字母会有弹窗提示

在线点这里
讲一下我的思路：
布局上：

1. 这几个输入框我用的是span模拟的，把正在输入的项的contenteditable属性设为true

2. 输入过的项的内容都变成小黑点，这里我用的是伪元素来模拟黑点，并绝对定位到正中心

3. 每个小输入框都设置box-sizing:border-box,计算好边框的宽度和盒子的高度
   js

其实主要就是有两点：

1. 设置activeIndex，代表正在聚焦的项的位置

2. 输入密码，判断是否是数字，activeIndex++

3. 存储输入过的数字，然后切换到下一个输入框，把下一个输入框变成可输入，其他的均不可输入

4. 上一个输入过的添加伪类circle，输入过的变成小黑点

5. 判断边界值，到达边界后，keyup事件不再执行任何函数

6. 删除的时候，activeIndex--,存储的数据中删除此项，
   注意：在火狐浏览器中，按下backspace键也会激发keypress事件，所以在keypress中我们要判断下keyCode

Answer 5

IE下面也不行，IE不支持addEventListener

Answer 6

在IOS上有问题，光标一直不动。