Javascript keyup事件处理程序更改焦点不适用于快速键入

我想要一个PIN输入表单，其中每个字符都被输入到单独的html输入中

我试图在javascript中捕获keyup事件，这样我就可以将焦点更改为下一个输入元素，从而避免用户自己需要通过鼠标单击或选项卡来更改它

除非用户很快地输入，否则它是有效的。例如，如果用户快速键入字符“1”和“2”，我发现第一个输入现在正确地包含字符“1”，而第二个输入仍然为空，焦点转移到第三个输入

为什么?

代码如下：

$document.readyfunction{ $'.pinchar'.keyup函数e{ 如果 e、 which==8//backspace ||e.which==46//del ||e.which==9//tab ||e.which==13//return ||e.which==27//esc ||e.which==37//箭头 ||e.which==38//箭头 ||e.which==39//箭头 ||e.哪个==40//箭头 ||e.which==27//esc ||e.which==20//CAPS LOCK ||e.which==17//Ctrl ||e.which==18//Alt ||e.which==16{//shift 返回false； }否则{ $this.parent.next.find'.pinchar'.focus； } }; }; 当您按下一个键，然后在释放它之前，按下另一个键时，keyup将失败。事件顺序依次为按键1、按键2、按键1、按键2。但是，由于字符是在keydown和keypress之后生成的，因此在这种情况下，在第一个keyup事件之前，输入中已经有两个字符

请尝试输入事件：

任何更改都会立即触发

但要正确处理其他关键点，还需要捕获箭头和退格关键点的keydown事件

我建议使用以下代码：

$document.readyfunction{ 变量$inputs=$.enterPINTable.pinchar； 函数stepinp、dir、clr{ 如果clr$inp.val； var buffer=$inp.val；//获取多余字符 //在下一个框中排列字符，以确保最多1个字符 var curr=$inputs.indexinp； 对于var i=curr，j=0；j0； else curr=Math.mincurr+j | | dir，$inputs.length-1； var$next=$inputs.eqcurr； $next.focus； setTimeoutfunction{ $next.select； }, 0; 返回false； } $inputs.onfocus，函数{ $this.select；//始终选择整个1字符文本 }.onmouseup，函数{//是否尝试取消选择？ setTimeoutfunction{//保持字符处于选中状态。。。。 $this.select； }.这一点； }.onkeydown，函数e{ 如果e.key==ArrowLeft | | e.key==ArrowUp返回步骤this，-1； 如果e.key==ArrowRight | | e.key==ArrowDown返回步骤this，1； 如果e.key==退格返回步骤this，-1，1； }.oninput，函数e{ stepthis，0； }.eq0.focus； }; .pinchar{宽度：1em；文本对齐：中心} 按键更适合这种情况。 问题在于，keyup触发较晚，即在keydown和keypress之后。 订单是这样的： 按下该键后，立即触发keydown事件。在这种情况下，值不会打印在屏幕上。触发该按键后，此时将打印该值。在这两个事件之后，当您将手指提离键时，会触发keyup。 因此，当您快速按下两个键时，它们的按键会以快速顺序调用。这是当值打印在屏幕上时，值会打印在同一个输入上，然后调用两个键的keyup，它会将焦点转发到下一个输入，使其为空，因为在按键过程中值已经打印

$document.readyfunction{ $'.pinchar'.keypress函数e{ $this.parent.next.find'.pinchar'.focus； }; };

---

您没有关闭}；这很奇怪，但对我来说，谢谢，格里萨，对不起..结束}；他失踪了。。。但上面只有一个打字错误。我不知道迭代在哪里，或者它可能如何帮助。如果我们考虑跨浏览器支持，KEYPress是不受欢迎的，不工作在所有浏览器中，如果不考虑OK，这也是有效的。也许Grisza认为keypress是dep

---

尽管重新设计了，但这个解决方案仍然有效。非常好。效果很好，我喜欢处理箭头和退格。谢谢

  $('.pinchar').on('input', function (e) {
       // ... etc.