应使用 document.addEventListener('keydown') 监听快捷键，仅在非编辑态（activeElement 非 INPUT/TEXTAREA/SELECT 且非 contenteditable）响应，校验修饰键并调用 preventDefault()。
直接用 document.addEventListener('keydown') 监听全局按键，但必须加焦点判断和修饰键校验，否则在输入框里按 Ctrl+S 会触发你写的保存逻辑，同时浏览器还可能执行默认保存——这是最常踩的坑。
如何避免快捷键干扰用户输入
核心是：只在非编辑态下响应快捷键。不能只靠 e.target.tagName 判断，因为 contenteditable 元素没有 tagName 为 INPUT，却同样需要被排除。
- 用
document.activeElement获取当前聚焦元素，检查其tagName是否为'INPUT'、'TEXTAREA'或'SELECT' - 额外判断
!e.target.isContentEditable，覆盖富文本区域 - 组合键检测优先用
e.ctrlKey、e.metaKey（Mac）、e.shiftKey，别只看e.key - 必须调用
e.preventDefault()，否则 Ctrl+T、F5 等会被浏览器劫走
为什么推荐用 keydown 而不是 keyup
keyup 触发时机晚，松开键才响应，导航类操作（比如表格箭头跳格）会有明显卡顿；keydown 在按下瞬间就触发，体验更连贯，且能及时拦截默认行为。
-
keydown可以阻止浏览器默认动作，keyup不行 - 长按重复触发时，
keydown会连续触发，keyup只触发一次 - 某些组合键（如 Alt+F4）在
keyup阶段早已退出页面，根本收不到事件
accesskey 属性到底能不能用
能用，但基本等于摆设——它不支持组合键，不能自定义行为，且激活方式因系统而异：accesskey="s" 在 Windows 是 Alt+S，在 Mac 是 Ctrl+Option+S，还容易和浏览器快捷键冲突（比如 Alt+D 聚焦地址栏）。
立即学习“前端免费学习笔记（深入）”；
- 适合极简场景：仅需跳转到某链接或表单控件，且不介意提示弱、发现性差
- 不支持修饰键组合（Ctrl+Shift+S 这类完全无法实现）
- 无障碍支持有限，屏幕阅读器对
accesskey的播报不统一，部分用户根本不知道它的存在 - 若真要用，务必在旁边加视觉提示，比如
<button accesskey="s">保存 <span class="hint">(Alt+S)</span></button>
快捷键帮助面板怎么写才不翻车
别用 JS 控制显隐，直接用原生 <details> + <summary>，语义正确、键盘友好、无需额外 focus 管理。
-
<summary>必须含可读文本，不能只放图标，否则屏幕阅读器无法识别 - 内部用
<dl><dt><dd>描述快捷键，比表格更轻量、缩放更稳 - 绝对不要用
display: none或aria-hidden="true"手动隐藏内容——这会让<details>失去原生键盘支持（空格/回车无法展开） - 如果要绑定快捷键（比如按 / 打开面板），记得在
keydown回调里先判断是否已聚焦在可编辑元素内，再执行detailsEl.open = true
真正难的不是监听按键，而是准确判断“此刻用户是不是在打字”。所有快捷键逻辑都得绕过输入框、富文本、下拉框——漏掉任意一种，就会在用户专注输入时突然弹出面板或触发保存，体验直接崩掉。
