应绑定keydown事件到document，用event.ctrlKey/event.metaKey结合event.key==='/'判断，加activeElement守卫和preventDefault，并避免重复触发与误关闭。
dialog怎么绑定Ctrl+/触发快捷键面板
直接在document上监听keydown，检查修饰键和key值，是最稳定的做法。别用keypress或keyCode——前者已废弃，后者无法区分Shift状态且在输入法激活时失效。
常见错误是没加event.preventDefault()，导致按Ctrl+/后浏览器打开开发者工具（Chrome）或触发其他默认行为；也容易忽略重复触发（event.repeat === true），造成面板闪现又关闭。
- Mac 用户需判断
event.metaKey && event.key === '/' - Windows/Linux 用户用
event.ctrlKey && event.key === '/' - 加守卫条件：
document.activeElement.tagName !== 'INPUT' && document.activeElement.tagName !== 'TEXTAREA'，避免编辑中误触发 - 调用
dialog.showModal()后立刻input.focus()，但不要select()—— 键盘用户不需要全选
为什么按完Ctrl+/面板一闪就消失
这不是dialog本身的问题，而是事件处理逻辑没兜住：最常踩的坑是showModal()之后又立刻执行了close()，或者有其他全局click监听器在遮罩层点击时无差别关闭了dialog。
dialog::backdrop点击默认不关闭，必须显式监听并调用close()；但如果监听范围太宽（比如document.addEventListener('click', () => dialog.close())），就会在面板刚弹出、焦点还没落定的瞬间误关。
立即学习“前端免费学习笔记（深入）”；
- 修复方法：点击关闭逻辑里加
if (event.target === dialog || event.target.closest('dialog') === dialog)判断 - 确认没有在快捷键回调末尾多写一句
dialog.close()（尤其在 toggle 函数里分支遗漏） - 检查是否在
keydown里漏了event.preventDefault()，导致后续keyup或浏览器行为干扰 - Safari 15.4 以下不支持
dialog，降级方案中若手动管理inert和焦点锁，也容易因 focus 状态错乱引发闪退
dialog内部键盘操作怎么让Tab不跳出浮层
dialog原生支持焦点锁定，前提是它被正确调用showModal()，且内部至少有一个可聚焦元素（如button或input）。如果没设autofocus，Safari 可能焦点落在body上，用户一按 Tab 就跳到页面其他地方。
- 第一个交互控件加
autofocus属性（如<button autofocus>关闭</button>） - 确保
dialog是的直系子元素——嵌套在form或div里会导致焦点管理失效 - 别手动给
dialog加tabindex="-1"，它默认已处理焦点捕获 - 如果用了
form method="dialog"，提交按钮必须是type="submit"，否则不会自动关闭，也不返回returnValue
移动端和旧浏览器兼容要注意什么
现代浏览器（Chrome 98+、Firefox 97+、Safari 15.4+）对dialog支持良好，但 iOS Safari 在某些版本中dialog::backdrop点击事件不冒泡，导致遮罩点击无响应；而 Safari 15.4 以下则完全不支持dialog，必须降级。
- 降级方案：用
<div role="dialog" aria-modal="true"> 替代，并手动处理 <code>Escape关闭、inert背景、焦点锁（可用focus-trap库） - 移动端要额外监听
touchstart防止点击穿透，尤其在 iOS 中backdrop点击有时不触发click - 别给
dialog设display: none——它靠open属性控制显隐，设display会破坏可访问性状态和showModal()的尺寸计算 - 所有快捷键文案中，
<kbd>Ctrl</kbd>要动态替换为<kbd>⌘</kbd>，别硬写两套 HTML
真正难的不是写出能动的代码，而是让dialog在各种输入法、焦点状态、嵌套容器和旧浏览器里都不崩——这些边界情况往往只在用户真实操作时才暴露。
