如何用JavaScript触发React的onKeyPress事件？Chrome兼容方案求助

嘿，我完全懂你遇到的坑——Chrome早就弃用了非标准的initKeyEvent方法，咱们得换用W3C标准的KeyboardEvent构造函数来实现跨浏览器兼容的事件触发，而且得确保React的合成事件能正确捕获到这个回车键事件。

直接能用的兼容代码 #

针对你的textarea回车需求，试试这段代码，Chrome和Firefox都能正常运行：

// 先拿到目标textarea元素
const targetTextarea = document.querySelector('textarea');

// 用标准构造函数创建keypress类型的回车键事件
const enterKeypressEvent = new KeyboardEvent('keypress', {
  bubbles: true,          // 允许事件冒泡，确保React合成事件能捕获到
  cancelable: true,       // 允许事件被取消
  view: window,
  key: 'Enter',           // 指定按键名称
  code: 'Enter',          // 指定按键编码
  keyCode: 13,            // 回车键的keyCode（兼容旧逻辑）
  charCode: 13            // keypress事件需要的字符编码
});

// 触发事件
targetTextarea.dispatchEvent(enterKeypressEvent);

要是发现onKeyPress还是没触发，建议换成触发keydown事件——React对keydown的支持更稳定，而且回车键的keydown事件完全能满足你的需求：

const enterKeydownEvent = new KeyboardEvent('keydown', {
  bubbles: true,
  cancelable: true,
  view: window,
  key: 'Enter',
  code: 'Enter',
  keyCode: 13,
  which: 13               // 兼容一些旧的事件处理逻辑
});

targetTextarea.dispatchEvent(enterKeydownEvent);

为啥之前的Chrome代码失效？ #

initKeyEvent是Firefox早年推出的非标准方法，Chrome从一开始就没支持过（或者很早就弃用了），现在所有现代浏览器都遵循W3C标准的KeyboardEvent构造函数，所以用标准方法才是跨浏览器兼容的正道。

小提醒 #

如果你的React组件是用事件委托绑定的（比如父元素监听子元素事件），一定要确保bubbles设为true，这样事件才能冒泡到父元素被捕获。另外，React官方现在更推荐用onKeyDown或onKeyUp代替onKeyPress，因为keypress事件在部分浏览器中已经被标记为废弃，用keydown能获得更好的跨浏览器兼容性。

内容的提问来源于stack exchange，提问作者Osama Xäwñz