添加键盘快捷键.md

添加键盘快捷键

通过使用 accesskey 属性，我们可以为用户指定一个快捷键来激活或聚焦元素。属性的值必须是单个字符。

值得注意的是，每个浏览器都提供了不同的组合键来访问快捷方式。

浏览器	macOS	Windows	Linux
Chrome	alt + ctrl + key	alt + key	alt + key
Firefox	alt + ctrl + key	alt + shift + key	alt + shift + key
Safari	alt + ctrl + key	N/A	N/A

在以下示例代码中，在 Chrome macOS 上按下组合 alt + ctrl + e 将触发按钮的 click 事件。

<button accesskey="e" onclick="alert('Edit')">Edit</button>

<input accesskey="b" />
<a href="https://www.baidu.com/" accesskey="c">百度一下，你就知道</a>

更多时候，我们会使用 JS 以编程式绑定形式添加快捷键：

document.addEventListener('keydown', (e) => {
  if (e.keyCode === 13) {
    // do something ...
  }
})

通过监听键盘事件，我们可以自由的统一不同浏览器的按键访问。

推荐：key、keyCode 和 which 和 keydown、keypress 和 keyup。

另外，我们还可以使用封装好的第三方库 keymaster，它是一个用于定义和调度键盘快捷键的简单微型库，且没有任何第三方依赖关系。

例如，以下是 keymaster 文档提供的示例：

import key from 'keymaster'

// 为按键 A 绑定快捷键
key('a', function () {
  alert('you pressed a!')
})

// 返回 false 将停止事件并阻止浏览器默认事件行为
key('ctrl+r', function () {
  alert('stopped reload!')
  return false
})

// 绑定多个快捷键，做同一件事
key('⌘+r, ctrl+r', function () {})

详细用法请查阅文档。

keymaster 已有好几年未进行维护，社区出现了一份维护版 hotkeys。