在JavaScript中如何监听按键事件并将按键信息输出到控制台？

基础按键监听与信息打印 #

浏览器提供三类按键事件，优先使用keydown事件，可实时捕获所有按键（包含修饰键）触发状态，直接读取事件对象即可获取完整按键信息，实现代码如下：

// 全局绑定按键监听，若仅需要监听指定元素可将document替换为对应DOM节点
document.addEventListener('keydown', (event) => {
  // 打印完整按键信息到控制台
  console.log('触发的按键详情：', {
    按键名称: event.key,
    物理按键编码: event.code,
    是否按下Ctrl: event.ctrlKey,
    是否按下Shift: event.shiftKey,
    是否按下Alt: event.altKey,
    是否按下Meta(Command/Win键): event.metaKey,
    是否为长按重复触发: event.repeat
  })

  // 若需要覆盖浏览器默认快捷键行为可启用下一行代码
  // event.preventDefault()
})

多组快捷键绑定实现 #

可以通过定义快捷键映射表的方式，批量管理多组快捷键逻辑，适配不同功能模块的触发需求，实现代码如下：

// 快捷键映射表，可根据不同业务场景拆分多组独立映射
const shortcutMap = {
  'Ctrl+s': () => {
    console.log('触发保存逻辑')
    // 此处补充对应业务代码
  },
  'Ctrl+Shift+z': () => {
    console.log('触发重做逻辑')
  },
  'Alt+x': () => {
    console.log('触发清空逻辑')
  }
}

document.addEventListener('keydown', (event) => {
  // 输入框聚焦时跳过快捷键触发，不需要可删除该判断
  if (['INPUT', 'TEXTAREA'].includes(event.target.tagName)) return

  // 拼接当前触发的快捷键组合字符串
  const currentKeys = []
  if (event.ctrlKey) currentKeys.push('Ctrl')
  if (event.shiftKey) currentKeys.push('Shift')
  if (event.altKey) currentKeys.push('Alt')
  if (event.metaKey) currentKeys.push('Meta')
  currentKeys.push(event.key.charAt(0).toUpperCase() + event.key.slice(1))
  const shortcutKey = currentKeys.join('+')

  // 匹配到对应快捷键则执行回调
  if (shortcutMap[shortcutKey]) {
    event.preventDefault()
    shortcutMap[shortcutKey]()
  }
})

注意事项 #

• 若需要给不同组件/标签单独绑定快捷键，可将事件绑定到对应DOM节点上，同时添加event.stopPropagation()阻止事件冒泡到全局
• 非必要场景不建议覆盖浏览器原生快捷键，避免影响用户正常使用习惯
• 特殊按键如空格、回车等可直接通过event.code匹配，避免不同输入法下event.key返回值不一致的问题

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