先贴图,需要实现的效果是这样的。
实现思路有两个:
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