我遇到了一个奇怪的问题，我想这是关于处理时间的问题，我有一个4输入的PIN。你可以在我准备的这个stackblitz代码中看到它：https://stackblitz.com/edit/vue-fezgmd?file=src%2Fcomponents%2FHelloWorld.vue
只需检查以下2项功能：nextInput和handleKeyUp//我留下了其余的代码来启用整个功能，而不会导致崩溃。
如果一切正常⇒ handleKeyUp将执行nextInput并传递一个名为key的参数，该参数基本上是按下的键。nextInput执行以下操作：
const nextInput = (key: string): void => {
console.log(key)
if (
focusOn.value !== null &&
focusOn.value < props.length - 1
) {
code[focusOn.value] = key
inputs[focusOn.value + 1].focus()
}焦点值=〉索引
code =〉reactive object[Array]绑定到v模型输入
因此，我们的想法是将键值分配给输入，但有时（大多数情况下，当你快速键入时），console.log（key）将显示按下的键，但输入不保存该值，如下所示：
您可以在控制台中看到5，它来自nextInput函数中的console.log（key），但是您看不到保存该值的最后一个输入。
我已经尝试了不同的条件句，但它不工作，我只是不明白。任何帮助/建议是非常感谢！
1条答案
按热度按时间epfja78i1#
nextInput()中存在问题在最后一个keyup中，
focusOn.value等于3，props.length - 1也等于3，所以你不用在if中输入，也不用运行下面这行，赋值给code数组：由于if语句只是决定是否聚焦下一个输入，所以这一行可以安全地转到if语句之上：
之所以只在快速键入时发生，是因为你实际上是同时按下多个键（滚动手指就可以做到这一点），所以最后你会得到多个键上而没有键下，而当你键入缓慢时，最后一个输入的v模型实际上是在处理赋值。