在Chrome中使用JavaScript编程式发送按键无效果，寻求解决方案

你遇到的问题其实很常见——单纯触发KeyboardEvent并不会让输入框的value自动变化，因为浏览器对原生输入控件（比如<input>）的处理逻辑是：只有真实用户交互（比如物理键盘敲击、屏幕键盘输入）才会触发内部的输入处理，自动更新value并同步事件链；而通过JS手动派发的键盘事件，只是告诉页面“有个按键动作发生了”，不会触发浏览器的输入填充逻辑。

下面给你两种可行的解决方案：

方案一：直接更新值+触发必要事件（最可靠） #

如果你的核心需求是让输入框的值变化，同时触发input、change等前端监听的事件，这种方式最简单高效：

const input = document.getElementById("input");
// 追加字符到输入框（也可以直接设置input.value = '你要的内容'）
input.value += 'a';
// 触发input事件（这是用户输入时浏览器会自动触发的核心事件，多数前端逻辑会监听它）
input.dispatchEvent(new InputEvent('input', { bubbles: true }));
// 如果需要触发change事件（比如输入框失去焦点时的逻辑），可以再加这一行
input.dispatchEvent(new Event('change', { bubbles: true }));

方案二：模拟完整的键盘事件流程+值更新 #

如果你需要严格模拟从keydown到keyup的完整按键流程，同时让输入框值变化，可以结合手动更新value和派发所有相关事件：

const input = document.getElementById("input");
const targetChar = 'a';

// 1. 触发keydown事件
input.dispatchEvent(new KeyboardEvent('keydown', {
  key: targetChar,
  code: `Key${targetChar.toUpperCase()}`,
  bubbles: true,
  cancelable: true
}));

// 2. 手动更新输入框的值（这一步是原来代码缺失的核心）
input.value += targetChar;

// 3. 触发input事件（同步输入变化）
input.dispatchEvent(new InputEvent('input', { bubbles: true }));

// 4. 触发keyup事件
input.dispatchEvent(new KeyboardEvent('keyup', {
  key: targetChar,
  code: `Key${targetChar.toUpperCase()}`,
  bubbles: true,
  cancelable: true
}));

额外注意事项 #

• 尽量避免使用keyCode和charCode，这两个属性已经被标准废弃，推荐使用key和code来指定按键信息。
• keypress事件也已被废弃，现在主流的做法是用keydown+keyup配合input事件来处理输入逻辑。
• 如果要模拟特殊按键（比如退格、回车），需要对应修改value的处理逻辑（比如退格要删除最后一个字符：input.value = input.value.slice(0, -1)）。

内容的提问来源于stack exchange，提问作者Matheus.M.