Vue.js中keyup/keydown事件获取输入值滞后一个字符的原因与解决方法

为啥会出现滞后一个字符的情况？ #

这事儿我太熟了！核心原因就是浏览器事件触发的时机问题：

• 当keydown事件触发时，浏览器还没来得及把你刚按下的字符写入输入框，这时候去读取输入框的值，自然只能拿到按键按下前的旧内容，比实际输入少一个字符。
• 那keyup为啥偶尔也会有问题？正常来说keyup是按键松开后触发，这时候输入框已经更新了，但如果是快速连续按键，或者代码逻辑里有其他干扰，也可能出现类似情况，但最常见的锅还是keydown的触发时机不对。

举个直观的例子：你第一次按"h"，keydown触发时输入框还是空的；等keyup触发时，"h"已经写入输入框，这时候读取才是正确的。如果全程用keydown，就会一直慢一拍。

靠谱的解决办法 #

给你三个从优到次的方案，按需选：

方案1：改用input事件（最推荐） #

这是专门为监听输入内容变化设计的事件，不管你是键盘输入、粘贴、甚至鼠标右键粘贴，只要输入框内容变了就会触发，而且时机刚好——内容更新完成后才触发，完全不会有滞后问题，兼容性也拉满。

修改后的代码示例：

<input type="text" id="myInput">
<script>
document.getElementById('myInput').addEventListener('input', function(e) {
  console.log('输入框值:', e.target.value);
  console.log('currentTarget值:', e.currentTarget.value);
});
</script>

方案2：用keyup替代keydown #

如果你的业务逻辑必须依赖键盘的按下/松开状态，那优先用keyup。它在按键松开后触发，这时候输入框的内容已经完成更新，读取到的就是最新值。

注意：按住按键不放时，keydown会连续触发，但keyup只会在松开时触发一次，这点要根据你的需求判断。

代码示例：

<input type="text" id="myInput">
<script>
document.getElementById('myInput').addEventListener('keyup', function(e) {
  console.log('输入框值:', e.target.value);
  console.log('currentTarget值:', e.currentTarget.value);
});
</script>

方案3：keydown配合setTimeout（应急用，不推荐） #

如果因为特殊原因必须用keydown，可以用setTimeout把读取值的操作延迟一小会儿，让浏览器先完成输入框的内容更新。这属于hack手法，可能有兼容性问题，尽量少用。

示例：

<input type="text" id="myInput">
<script>
document.getElementById('myInput').addEventListener('keydown', function(e) {
  setTimeout(() => {
    console.log('输入框值:', e.target.value);
    console.log('currentTarget值:', e.currentTarget.value);
  }, 0); // 延迟0毫秒就够，浏览器会先处理UI更新再执行这个回调
});
</script>

总结 #

优先选input事件，它是处理输入内容变化的最优解；如果要绑定键盘事件就用keyup；keydown加setTimeout是实在没办法的应急方案，能不用就不用。

内容的提问来源于stack exchange，提问作者farbodg