验证码输入框

Question

验证码输入框要如何设计？？
毫无没头绪啊>_<
老铁们，说下思路>_<

Answer 1

四个div，js判断输完调下一个

Answer 2

发一个偷鸡的想法，先把底部的横线切下来，然后做成背景图
然后用letter-spacing 和padding 实现 嘿嘿 美滋滋

Answer 3

首先是布局：不一定非要用div的，input一样能够做到布局上显示：

看一下下面的预览：

https://jsfiddle.net/td4rn5b4/

注意 我是用了 input[type=number]，移动端上能够唤起数字键盘输入验证码，比较友好。

至于跳到下一个input，这个要监听输入即可，可以使用oninput如果输入了，并且长度为1，则自动跳到下一个input中，并且使其focus。

上面的样式我在ios的safari、chrome、uc、微信内置浏览器都试过，没问题。PC预览会显示一个上下箭头，移动端不存在的。

另外maxlength是为了你选择text的input类型设置的