如何使4位代码字段这样?

Question

我是这样做的:

<table>
<tr>
<td><input class="clock" type="text" maxlength="1" size="1" onkeyup="next(2)"></td>
<td><input id="2" class="clock" type="text" maxlength="1" size="1" onkeyup="next(3)"></td>
<td><input id="3" class="clock" type="text" maxlength="1" size="1" onkeyup="next(4)"></td>
<td><input id="4" class="clock" type="text" maxlength="1" size="1"></td>
</tr>
</table>
<script>
function next(next) {
document.getElementById(next).focus();
}
</script>

但是它会跳过数字。(这里有演示:https://codepen.io/snnirmk/pen/LYyXrMj和https://codepen.io/snnirmk/pen/poPQKGo)

我怎样才能不跳过数字?

更新:第一个演示没有为我工作，但我发现了一个新的事件"oninput"没关系，还是谢谢你。

Answer 1

如果您按下一个键，然后在释放前一个键之前按下另一个键，则会跳过数字(如果您键入速度快，则会发生这种情况)

一个快速的修复方法是这样做:

<table> 
<tr> 
<td><input class="clock" type="text" maxlength="1" size="1" onkeydown="next(2)"></td> 
<td><input id="2" class="clock" type="text" maxlength="1" size="1" onkeydown="next(3)"></td> 
<td><input id="3" class="clock" type="text" maxlength="1" size="1" onkeydown="next(4)"></td> 
<td><input id="4" class="clock" type="text" maxlength="1" size="1"></td> 
</tr>
</table>
<script>function next(next) {
setTimeout(function() {
document.getElementById(next).focus(); 
}, 1);
}</script>

这个解决方案有点粗糙，因为它使用了setTimeout函数。理想情况下，它不应该使用setTimeout函数，但这样解决方案会更复杂。