如何仅使用JavaScript在Firefox中监听Ctrl键按压事件

原代码在Firefox失效的核心原因 #

• 代码使用的keypress事件存在浏览器实现差异：Firefox 不会为携带Ctrl、Alt等系统修饰键的组合按键触发keypress事件，回调函数完全不会执行，自然无法进入后续的判断逻辑。
• keypress事件本身已被Web标准标记为废弃，Chrome对该事件的宽松触发规则属于非标准的兼容实现，不具备跨浏览器一致性。

跨浏览器通用修正实现 #

替换废弃的keypress事件为所有现代浏览器都稳定支持的keydown事件，保留原有按键判断逻辑即可，示例代码如下：

// 全局绑定keydown事件，同时兼容Chrome、Firefox
document.onkeydown = (e) => {
  console.log(e);
  // 匹配Ctrl+Z的组合按键判断
  if (e.ctrlKey && e.code === "KeyZ") {
    // 注意：原代码的document.write会清空当前页面所有内容，实际业务场景请替换为自定义功能逻辑
    document.write("do something");
  }
}

实现注意事项 #

• 优先使用e.code属性做物理按键位置判断：相较于e.key属性，e.code不会因为用户的输入法状态、键盘布局差异返回不同值，跨浏览器一致性更强。你在Chrome中观察到的组合键触发时key为空值的问题，在keydown事件中也不会影响code属性的正常读取。
• 如果需要屏蔽浏览器默认的Ctrl+Z全局撤销行为，需要在命中判断后调用e.preventDefault()，避免自定义逻辑和浏览器默认行为重叠。
• 不建议使用keyup事件实现组合键监听：按键松开才触发的逻辑存在明显交互延迟，且同样存在修饰键事件的兼容边界问题。

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