要用，而且优先用。现代浏览器已原生支持，自带模态行为、焦点管理、esc关闭和无障碍语义，比手写div+aria-modal更可靠、更简洁。
快捷键面板要不要用 dialog 元素？
要用，而且优先用。现代浏览器（Chrome 97+、Firefox 98+、Safari 15.4+）已原生支持 dialog，它自带模态行为、焦点管理、Esc 关闭和无障碍语义——比手写 div + aria-modal 少踩至少三个坑。
常见错误是把快捷键面板做成普通 div 并用 display: none 控制显隐，结果键盘焦点卡在背景内容里，Tab 键无法限制在面板内，屏幕阅读器也读不出“这是帮助弹窗”。
实操建议：
- 用
<dialog id="shortcut-panel"></dialog>包裹整个面板结构 - 打开时调用
dialog.showModal()，别用show()（后者不阻塞交互） - 必须配
<button onclick="this.closest('dialog').close()">×</button>或监听keydown捕获Escape - 关闭后手动调用
dialog.close()，否则open属性不会自动清除
怎么让快捷键列表真正“可读”又“可操作”？
不是堆文字就行。用户扫一眼要立刻分清“触发动作”和“对应效果”，还要能键盘导航。纯靠 ul + li 列表容易语义模糊、样式错位、焦点跳转混乱。
推荐用定义列表 dl：每个 dt 放快捷键组合（如 Ctrl+S），dd 放说明（如“保存当前文档”）。这样语义清晰，CSS 定制也方便对齐。
实操建议：
-
dt内部用<kbd></kbd>包裹按键，如<kbd>Ctrl</kbd>+<kbd>S</kbd>，浏览器会渲染成等宽小按钮样式 - 为每组
dt/dd添加tabindex="0"，确保键盘可聚焦（尤其当用户想复制某条快捷键时） - 避免在
dd里放链接或按钮——帮助面板是只读参考，交互入口应留在主界面 - 用
prefers-reduced-motion媒体查询禁用淡入动画，否则部分用户会眩晕
监听全局快捷键时为什么 Ctrl+K 没反应？
因为浏览器或操作系统可能已劫持了该组合键（比如 Chrome 的地址栏聚焦、macOS 的 Spotlight）。直接监听 keydown 很大概率被拦截或忽略。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
真正可靠的做法是监听 keydown 时检查 event.key 和修饰键状态，并主动 preventDefault() ——但仅限你明确需要接管的组合，且必须避开系统级热键（如 Alt+Tab、Cmd+Q）。
实操建议：
- 用
event.ctrlKey && event.key === 'k'判断，别依赖event.code（它返回物理键位，不反映实际字符） - 只在页面有焦点（
document.hasFocus()）且非输入框激活时响应，避免干扰用户打字 - 监听挂载在
document上，而不是某个 div；卸载时用removeEventListener清理，防止内存泄漏 - 首次打开面板后，把焦点移到面板内部第一个可聚焦元素（如关闭按钮），否则键盘用户按完
Ctrl+K还得再按一次Tab
移动端要不要做快捷键面板？
要做，但不能照搬桌面逻辑。手机没有 Ctrl 键，也没有 Tab 导航习惯，所谓“快捷键”其实是手势+按钮的简化路径。
比如把“搜索”快捷键转为右上角放大镜图标按钮；把“切换主题”变成底部常驻的太阳/月亮开关。强行列出 Cmd+Shift+T 对 iOS 用户毫无意义。
实操建议：
- 用
@media (hover: none) and (pointer: coarse)检测触屏设备，隐藏所有键盘组合描述 - 保留面板结构和
dialog逻辑，但内容换成大号图标 + 短文案 + 直接操作按钮 - 触摸目标尺寸 ≥ 48×48px，避免误点；同时保留键盘焦点样式，兼顾辅具用户
- 不要用
touchstart替代click——现代移动端 click 延迟已基本消除，兼容性更稳
最易被忽略的一点：快捷键面板不是功能，是认知桥梁。用户打开它，不是为了学命令，而是确认“我现在能做什么”。所以每条快捷键必须对应界面上真实存在的操作，且文案动词要和按钮文字完全一致（比如按钮写“发布”，快捷键说明就不能写“提交”）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
