如何在keypress事件触发时提前获取<input>元素更新后的输入值？

问题原因 #

keydown事件在按键按下瞬间触发，此时浏览器尚未完成输入内容到input value属性的同步，所以读取到的是更新前的旧值。你使用的setTimeout属于宏任务，执行优先级低于DOM更新任务，因此执行时机不稳定，鲁棒性差。

可行解决方案 #

方案1：使用beforeinput事件（推荐，支持所有输入场景）

beforeinput是W3C标准化的输入前事件，触发时机在内容写入DOM之前，可直接获取即将插入的内容，覆盖键盘输入、粘贴、拖拽输入、输入法输入等所有场景，无需延迟等待。
示例代码：

input.addEventListener("beforeinput", function(e) {
  const selectionStart = this.selectionStart;
  const selectionEnd = this.selectionEnd;
  const oldValue = this.value;
  // e.data为即将插入的内容，粘贴、输入法输入场景均可正常获取
  const insertText = e.data ?? '';
  // 手动拼接得到更新后的完整值
  const finalValue = oldValue.slice(0, selectionStart) + insertText + oldValue.slice(selectionEnd);
  console.log('更新后的最终值：', finalValue);
});

兼容性：支持所有现代浏览器，仅不兼容IE系列。

方案2：使用微任务替代setTimeout

用微任务替代宏任务setTimeout，可保证在当前帧DOM更新完成后立刻执行，完全不受硬件速度和事件队列阻塞影响，完美兼容粘贴场景：

input.addEventListener("keydown", function(e) {
  // Promise.resolve生成的微任务执行时机早于所有宏任务
  Promise.resolve().then(() => {
    console.log('更新后的最终值：', this.value);
  });
});

如果需要兼容不支持Promise的老旧浏览器，可替换为queueMicrotask()API实现同等效果。

方案3：使用标准input事件

如果不需要在按键按下阶段做拦截逻辑，只是要获取更新后的最新值，input事件是最通用的选择，它在value更新完成后立刻触发，自动覆盖所有输入场景，写法最简单：

input.addEventListener("input", function(e) {
  console.log('更新后的最终值：', this.value);
});

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