html无原生快捷键，需用javascript监听keydown事件实现；accesskey属性因浏览器差异、冲突和无反馈而基本弃用；全局快捷键应绑定document并注意修饰键、preventdefault及焦点上下文。
HTML 本身没有快捷键——浏览器不解析 标签里的“快捷键逻辑”，所有键盘操作响应必须靠 JavaScript 实现。
为什么 accesskey 属性几乎没人用
HTML 确实支持 accesskey 属性，比如 <button accesskey="s">保存</button>，但实际效果极不可靠：
- 不同浏览器触发方式不同：Chrome/mac 需
Alt+Option+S，Firefox/win 是Alt+S，Safari 又有差异 - 与系统级快捷键（如
Cmd+T、Alt+Tab）冲突，常被直接忽略 - 屏幕阅读器用户可能意外触发，造成可访问性反效果
- 没有视觉反馈，用户根本不知道哪些元素绑了
accesskey
真正可控的键盘操作只能靠 addEventListener('keydown')
想让“按下 Ctrl+S 就触发保存”，必须监听全局或目标元素的键盘事件：
document.addEventListener('keydown', (e) => {
if (e.ctrlKey && e.key === 's') {
e.preventDefault(); // 阻止浏览器默认保存页面行为
saveCurrentData();
}
});
关键点：
- 务必检查
e.ctrlKey/e.metaKey（mac 上是Cmd键）而不是只看e.key - 调用
e.preventDefault()防止和浏览器原生快捷键打架 - 避免在输入框（
input、textarea）内触发，否则会干扰用户正常打字 - 推荐用
e.code判断物理按键（如'KeyS'），比e.key更稳定（不受大小写/输入法影响）
React/Vue 项目里别在 JSX 模板写 onKeyDown 绑定全局快捷键
常见错误是把 onKeyDown 直接写在根组件 div 上，结果只有焦点落在该容器内才生效——而用户很可能刚点完按钮就按 Ctrl+S，此时焦点在按钮上，事件根本不会冒泡上来。
正确做法：
- 在
useEffect（React）或onMounted（Vue）里调用document.addEventListener - 卸载时必须对应
removeEventListener，否则内存泄漏 - 如果应用有多个模块需要不同快捷键（如编辑页 vs 表单页），建议用状态控制是否启用某组快捷键，而不是频繁增删监听器
最麻烦的不是写监听逻辑，而是处理焦点上下文和跨平台修饰键差异；很多团队最后都封装成一个 useHotkey Hook 或 hotkeyManager 类来统一管理——不然每次加个 Ctrl+Z 撤销，都得重新查一遍 metaKey 和 ctrlKey 的兼容表。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
