html实现键盘快捷键提示面板_html快捷键绑定与提示浮层实现【推荐】-html教程-PHP中文网

快捷键应避免全局监听，仅在非可编辑元素触发；用 e.metaKey || e.ctrlKey 兼容多平台；面板用 inset-inline-end 和 scrollbar-gutter: stable 避开滚动条；动态渲染 ⌘/Ctrl 符号；支持 Escape 和遮罩层关闭；组合键冲突需依焦点上下文判定优先级。

html实现键盘快捷键提示面板_html快捷键绑定与提示浮层实现【推荐】

快捷键绑定用 `addEventListener('keydown')`，但别监听全局

直接在 document 上绑 keydown 容易和输入框、富文本编辑器冲突——用户在里按 Ctrl+S 会触发保存，也同时触发你写的提示面板，体验极差。

更稳妥的做法是：只在非可编辑元素获得焦点时（或页面主体区域）启用快捷键监听，且用 event.target 排除表单控件：

document.addEventListener('keydown', (e) => {
  if (e.target.matches('input, textarea, [contenteditable="true"]')) return;
  if (e.ctrlKey && e.key === 's') {
    e.preventDefault();
    showShortcutPanel();
  }
});

e.preventDefault() 必须加，否则浏览器可能执行默认行为（比如 Ctrl+T 开新标签）
Mac 用户用 metaKey 替代 ctrlKey，建议统一写成 e.metaKey || e.ctrlKey
避免用 keyCode（已废弃），优先用 key 或 code；key 表语义（如 "Enter"），code 表物理键位（如 "KeyA"）

提示面板用 `position: fixed` + `z-index`，但得避开滚动条遮挡

浮层要始终可见，fixed 是最直接方案，但容易被右侧滚动条“吃掉”右边缘，尤其 Windows 默认滚动条占 17px。

解决方法不是硬调 right: 17px（不同系统/缩放比例下值不同），而是用 inset-inline-end: 1rem 配合 scrollbar-gutter: stable（现代浏览器支持）：

.shortcut-panel {
  position: fixed;
  inset-inline-end: 1rem;
  bottom: 1rem;
  z-index: 1000;
  scrollbar-gutter: stable;
}

用 inset-inline-end 而非 right，兼容 RTL 布局
务必设 z-index 大于所有业务组件（常见冲突点是模态框、导航栏）
面板内部用 display: flex; flex-direction: column 排列快捷键项，比浮动或 inline-block 更可控

快捷键文案要区分 `Ctrl` 和 `Cmd`，别写死 “Ctrl+S”

用户看到 “Ctrl+S” 却在 Mac 上按没反应，第一反应是功能坏了。必须动态判断平台并渲染对应符号。

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

检测方式很简单：navigator.platform.includes('Mac')，但注意 Safari 的 navigator.platform 可能返回 "MacIntel"，所以用 includes('Mac') 更稳：

function getModifierKey() {
  return navigator.platform.includes('Mac') ? '⌘' : 'Ctrl';
}
// 渲染时：${getModifierKey()}+S

用 Unicode 符号 ⌘（U+2318）比写 “Cmd” 更直观，且字体支持良好
避免拼写 “Ctrl+S”、“Cmd+S” 混用，同一面板内必须统一格式
如果快捷键含 Shift（如 Shift+Delete），注意 Mac 键盘上 Shift 图标是 ⇧，可直接用 U+21E7

关闭面板别只靠点击 ×，得支持 `Escape` 和点击遮罩层

用户打开提示后想快速退出，只提供 × 按钮不够——手指还在键盘上，自然倾向按 Escape；或者点一下空白处，直觉上就该收起。

两件事都要做，且互不干扰：

document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape' && panelOpen) hideShortcutPanel();
});
overlay.addEventListener('click', () => hideShortcutPanel());