移动端 验证码/密码 输入框实现--安卓/ios适用

先贴图，需要实现的效果是这样的。

实现思路有两个：

 

1、用6个input，输入一个数字后将focus给下一个输入框。

2、用一个input和6个span，input隐藏，用span显示。

 

现在大部分都是使用的第二种方法。（当然，如果你能说服产品也可以只用一个普通的input输入框，就什么都不用考虑了）

 

两种方案遇到的坑，以及优缺点，如下：

 

方案一：6个input。

 

主要就是用js切换focus，在安卓是相当流畅的，但是在ios会严重卡顿，简直逼死强迫症。

 

HTML：

<div class="divYZM">
    <!-- onpropertychange是为了避免在ios中oninput方法不被触发 -->
    <input id="check_1" class="numDiv" type="number" oninput="inputNext(check_1)" onpropertychange="inputNext(check_1)"/>
    <input id="check_2" class="numDiv" type="number" oninput="inputNext(check_2)" onpropertychange="inputNext(check_2)"/>
    <input id="check_3" class="numDiv" type="number" oninput="inputNext(check_3)" onpropertychange="inputNext(check_3)"/>
    <input id="check_4" class="numDiv" type="number" oninput="inputNext(check_4)" onpropertychange="inputNext(check_4)"/>
    <input id="check_5" class="numDiv" type="number" oninput="inputNext(check_5)" onpropertychange="inputNext(check_5)"/>
    <input id="che