web前端如何实现快捷键功能？html 全局属性accesskey与快捷键
一、需求场景描述
1.快捷键和键盘的“暧昧”关系
受欢迎的快捷键，它被常用且实用。快捷键是人们常用的一种代替鼠标操作的方式，这在PC端尤为常见，因为键盘（含笔记本电脑自带键盘）的存在，为快捷键提供了良好的生长土壤。比如人们熟悉的“Ctrl+C”和“Ctrl+V”组合键套餐，以及Enter回车键（常关联发送/提交/确定等操作）。自定义快捷键也很受欢迎，强大的应用程序，往往会考虑支持这点。
2.使用快捷键的好处
①快捷方便。快捷键最大的好处则是恰如其名所示，快建方便，有些操作通过鼠标进行可能需要好几步，快捷键则省事许多。比如在WebStorm要复制上一行，可以通过“Ctrl+D”，一步到位；而不用快捷键，单纯用鼠标的话，要先用鼠标选中然后右键复制，再然后将光标放在下一行，最后右键选择粘贴按钮。
②比较酷。比起鼠标右键加单击选择的操作，一顿猛如虎的快捷键操作，看起来神秘又酷，让人感觉“这是一个高手”。这个好处，其实可以看作类似界面设计美观具有高级感的用户体验，所以这是一个正经的好处。
③支持快捷键的程序，更受欢迎，更容易获得好评，因为用户体验更好。
二、wen前端实现快捷键的关键：html 全局属性accesskey
1.认识accesskey
accesskey：一个html的全局属性，html4就有了，html5的时候将它支持的元素扩展为所有元素，也就是说你可以在任何元素上启用它（html4时，支持的元素很有限）。accesskey提供了为当前元素生成快捷键的方式，属性值必须包含一个可打印字符。
支持的元素：所有元素。
浏览器兼容性：除了 Opera浏览器，其他主要浏览器都支持。
用法说明：不同操作系统使用的方式略有不同，且如快捷键已被占用，可能会不生效（此时该快捷键可能激活的是别的活动）。Windows，同时按下 Alt + accesskey 属性设置的键，能激活选中对应的元素，例如Alt + A。Mac，同时按下 ctrl + option + accesskey 属性设置的键，能激活选中对应的元素，例如 ctrl + option + B。
激活 accesskey 的操作取决于浏览器及其平台。下面是一张来自mozilla的示意图。
2.什么是可打印字符
可打印字符是ASCII字符集中的一部分，共有95个字可打印字符（0x20-0x7E），可打印字符用于显示在输出设备上，例如荧屏或者打印纸上。大多数我们常见的字符都是可打印字符。
三、完整Demo示例
说明：这是window操作系统环境下chrome浏览器的示例。
1.效果图截图
2.代码部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>```
html 全局属性 accesskey
```</title>
</head>
<body>
<div>
<h3>html 全局属性 accesskey</h3>
<div class="box">
<h1>1. accesskey</h1>
<h2>快捷键(alt+v)可以跳转到vue.js；快捷键(alt+a)可以跳转到echarts;快捷键(alt+t)可以激活提交按钮并触发click事件</h2>
<a href="https://cn.vuejs.org" accesskey="v">vue.js</a>
<a href="https://echarts.apache.org" accesskey="e">echarts</a>
<button accesskey="T" onclick="clickSubmit()">提交按钮</button>
</div>
</div>
</body>
<script>
function clickSubmit (el) {
console.log(el)
alert('你通过快捷键激活了这个 button 的click事件')
}
</script>
<style>
.box {
margin: 30px;
padding: 20px;
border: 1px solid #eee;
border-radius: 5px;
box-shadow: 0 0 12px 1px #b3aaaa;
}
</style>
</html>
