快捷键提示面板应使用 <dialog> 元素，它原生支持模态行为、焦点管理与 showModal() 控制，比手写 div + aria-modal 更轻量且可访问性更好；旧版 Safari 等不支持时才降级为带 role="dialog" 的 div 并手动处理交互。
快捷键提示面板该用什么 HTML 结构
用 <dialog> 最合适，它原生支持模态行为、焦点管理与 showModal() 控制，比手写 div + display: none 更可靠。若需兼容旧浏览器（如 IE 或 Safari role="dialog" 和 aria-modal="true" 的 <div>，并手动处理 Esc 关闭和焦点锁定。
-
<dialog>内必须包含至少一个可聚焦元素（如<button>或<input>），否则 Safari 可能不触发focusin事件 - 不要把整个快捷键列表塞进
aria-label—— 屏幕阅读器会一次性读完，应使用语义化表格或定义列表（<dl>）组织键名与说明 - 避免在
<dialog>外部监听keydown来触发显示，推荐绑定到全局document并过滤event.ctrlKey || event.metaKey等组合键
怎么监听 Ctrl+/ 或 Cmd+/ 触发面板
直接监听 keydown 时，/ 键在非英文键盘上可能对应其他码值（如德语键盘的 ß），且输入法激活时事件会被吞掉。稳妥做法是监听 keydown 后检查 event.key === '/' 并确保修饰键状态正确，同时忽略重复触发（event.repeat === false）。
- Mac 上
Cmd+/对应event.metaKey && event.key === '/'；Windows/Linux 用event.ctrlKey && event.key === '/' - 别用
event.keyCode或event.which—— 已废弃，且无法区分大小写或 Shift 状态 - 如果页面有
<input>或<textarea>获焦，通常不应响应快捷键，加判断document.activeElement.tagName !== 'INPUT' && document.activeElement.tagName !== 'TEXTAREA'
CSS 怎么让面板居中又不遮挡关键操作区
用 position: fixed 配合 top: 50% + left: 50% + transform: translate(-50%, -50%) 是最稳定方案。避免用 flex 布局父容器，因为 <dialog> 是顶层元素，不参与文档流。
- 设置
max-width: 90vw和max-height: 80vh，防止在小屏上溢出；内部用overflow-y: auto容纳长列表 -
z-index至少设为1000，确保压过弹窗、下拉菜单等常见 UI 元素 - 加
backdrop-filter: blur(2px)（配合backdrop伪元素）可提升视觉层次，但注意 Safari 需要-webkit-backdrop-filter
关闭逻辑里最容易漏掉的三件事
用户按 Esc、点遮罩层、点右上角 ×，这三种关闭方式必须全部覆盖，且每种都要触发相同清理动作：释放焦点、重置滚动位置、清除键盘监听器引用（防内存泄漏）。
立即学习“前端免费学习笔记（深入）”；
-
<dialog>的close()方法不会自动将焦点还给触发元素，需手动调用triggerButton.focus() - 遮罩层（
dialog::backdrop）点击关闭时，事件目标是 backdrop 本身，不是 dialog，别写成dialog.addEventListener('click', ...) - 如果面板内有自定义快捷键（如
J/K切换条目），关闭前必须解绑，否则残留监听器可能干扰后续操作
