如何使用JavaScript触发input元素绑定的keyup事件监听器

• 原生事件主动触发法
  直接赋值后手动构造并分发keyup事件即可，适配绝大多数原生JS开发的页面：

const cardInput = document.getElementById('CardNumber');
// 先完成赋值
cardInput.value = "123";
// 构造keyup事件，bubbles设为true兼容事件委托的绑定场景
const keyupEvent = new KeyboardEvent('keyup', {
  bubbles: true,
  cancelable: true
});
// 触发绑定的keyup监听器
cardInput.dispatchEvent(keyupEvent);

• 框架受控组件兼容方案
  如果输入框是React、Vue等框架渲染的受控组件，仅触发keyup可能无法同步框架内部状态，需要补充触发input事件：

const cardInput = document.getElementById('CardNumber');
cardInput.focus();
cardInput.value = "123";
// 先触发input事件同步框架内部维护的输入值状态
cardInput.dispatchEvent(new Event('input', { bubbles: true }));
// 再触发keyup事件
cardInput.dispatchEvent(new KeyboardEvent('keyup', { bubbles: true }));

• 模拟真实按键输入（适配性最高）
  如果页面有输入校验、防抖等拦截逻辑，前两种方案不生效时，可以逐个字符模拟完整的按键输入流程，完全还原用户手动输入的行为：

const cardInput = document.getElementById('CardNumber');
const inputText = "123";
cardInput.focus();

// 逐个字符模拟按键操作
for (let i = 0; i < inputText.length; i++) {
  const char = inputText[i];
  // 触发keydown事件
  cardInput.dispatchEvent(new KeyboardEvent('keydown', { key: char, bubbles: true }));
  // 追加单个字符
  cardInput.value += char;
  // 触发input事件
  cardInput.dispatchEvent(new Event('input', { bubbles: true }));
  // 触发keyup事件
  cardInput.dispatchEvent(new KeyboardEvent('keyup', { key: char, bubbles: true }));
}

如果页面有输入防抖限制，可以在每次字符输入之间加10~50ms的延时，避免逻辑拦截。

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