为何快速输入时PIN输入框无法保留所有按键值？

核心问题原因 #

你遇到的快速输入时输入框不更新的问题，本质是Vue响应式数组的更新检测限制：直接通过数组索引赋值（code[focusOn.value] = key）的方式，Vue无法自动追踪到数组的变化，尤其是在快速连续操作时，DOM更新会滞后甚至丢失。

修复方案 #

把直接索引赋值的方式替换为Vue能识别的响应式数组更新方法：

方案1：使用splice方法（Vue2/Vue3通用）

修改nextInput函数中的赋值逻辑：

const nextInput = (key: string): void => {
  console.log(key)
  if (
    focusOn.value !== null &&
    focusOn.value < props.length - 1
  ) {
    // 用splice替代直接索引赋值，确保响应式更新
    code.splice(focusOn.value, 1, key)
    inputs[focusOn.value + 1].focus()
  }
}

方案2：Vue3专属（针对ref声明的数组）

如果code是用ref声明的数组，也可以通过重新赋值的方式触发响应：

const nextInput = (key: string): void => {
  console.log(key)
  if (
    focusOn.value !== null &&
    focusOn.value < props.length - 1
  ) {
    code.value[focusOn.value] = key
    // 重新赋值数组触发响应式更新
    code.value = [...code.value]
    inputs[focusOn.value + 1].focus()
  }
}

额外优化建议 #

• 改用keydown事件替代keyup：keyup在按键抬起时触发，快速输入时可能出现焦点已切换但上一次keyup才触发的时序问题；keydown在按键按下时触发，更贴合输入操作的时序。
• 添加输入合法性校验：确保只有数字（或业务允许的字符）才会被处理，避免无效输入干扰逻辑。

内容的提问来源于stack exchange，提问作者Tomas Gil Amoedo