键盘快捷操作需通过keydown监听、显式聚焦控制和语义对齐实现；所有可导航控件须设tabindex="0"，用focus()而非click()，enter按元素类型区分提交或展开，esc依上下文优先关闭浮层，且必须提供:focus-visible视觉反馈。

键盘快捷操作不是加个 accesskey 就完事的；真要让表单响应方向键切换、Enter 提交、Esc 重置，得靠 keydown 监听 + 显式聚焦控制 + 表单语义对齐。

用 tabindex 和 focus() 主动接管焦点流

浏览器默认的 Tab 顺序常被忽略结构，而方向键切换必须依赖可聚焦元素。不能只靠 input 自带可聚焦性——下拉菜单、自定义按钮、卡片式选项都得手动支持。

• 所有参与快捷导航的控件（包括 div 模拟的 radio 组、button）都要设 tabindex="0"
• 用 element.focus() 而非 click() 触发，避免移动端误触发
• 监听 keydown 时先 event.preventDefault()，否则方向键会滚动页面或触发浏览器默认行为
• 示例：按 → 切到下一个 [data-nav="next"] 元素：

  document.addEventListener('keydown', e => {
    if (e.key === 'ArrowRight') {
      e.preventDefault();
      const next = document.querySelector('[data-nav="next"]:focus-within ~ [data-nav="next"], [data-nav="next"]:not(:focus)');
      next?.focus();
    }
  });

区分 Enter 的两种语义：提交 vs. 展开

在输入框里按 Enter 是提交，在 select 或带下拉的 div 里是展开选项——混用会导致用户误操作。必须根据当前聚焦元素类型分流处理。

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

• 聚焦在 input[type="text"] 或 textarea 时，Enter 应触发表单提交（除非该字段是搜索框）
• 聚焦在 button、select 或 [role="combobox"] 上时，Enter 应展开下拉或确认选中项
• 用 event.target.matches('input, textarea') 判断类型，别用 nodeName —— 自定义组件可能用 div 实现
• 提交前检查 form.checkValidity()，别只靠前端 JS 提交

小心 Esc 的作用域：全局重置还是局部关闭

Esc 键最容易出问题：用户想关弹窗，结果整个表单被重置；或者点了下拉后按 Esc 没反应。关键在事件捕获阶段判断当前上下文。

• 如果页面有打开的下拉、模态框、日期选择器，Esc 应优先关闭它们，而不是重置表单
• 用 document.activeElement 查当前聚焦元素，再向上找最近的 [data-modal] 或 [role="dialog"]
• 只有当没有活跃浮层且表单未提交时，Esc 才调用 form.reset()
• 注意：某些富文本编辑器会劫持 Esc，需在它们的 API 文档里确认是否暴露了禁用快捷键的配置项

最常被跳过的点是焦点样式：没给 :focus-visible 写 CSS，用户根本不知道当前聚焦在哪。键盘操作失去视觉反馈，等于直接废掉一半快捷键价值。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！