键盘导航的核心是区分导航意图与编辑意图，通过检查 activeelement 类型及 contenteditable 状态来隔离处理，避免干扰输入；优先用 focusin 锁定焦点区域，防 label 空格误触，统一 border-width 防布局跳动。
键盘导航不是“让键盘能操作”，而是让键盘操作不破坏已有焦点逻辑、不干扰用户输入、不引发意外行为。核心在于区分「导航意图」和「编辑意图」，并按场景做隔离处理。
怎么判断当前是否该响应键盘导航
关键不是监听所有 keydown，而是先确认用户此刻是不是在“导航”——比如不在输入状态、没聚焦到可编辑区域。否则 Ctrl+F 会同时触发你写的搜索面板和浏览器原生查找。
- 用
document.activeElement拿到当前聚焦元素，检查其tagName是否为'INPUT'、'TEXTAREA'或'SELECT' - 补充
!event.target.isContentEditable判断，覆盖contenteditable="true"的富文本容器 - 如果任一条件为真，直接
return，不执行任何导航逻辑 - Mac 上优先检测
event.metaKey，Windows/Linux 用event.ctrlKey；避开altKey组合，防止与系统级快捷键冲突
为什么 focusin 比 keydown 更适合锁焦点区域
模态框、侧边栏这类需要“限制 Tab 范围”的场景，不能只靠监听 keydown + Tab，因为用户可能用 Shift+Tab、鼠标点击、屏幕阅读器切换，甚至直接点 body 外部空白处——这些都不会触发 keydown 中的 Tab 判断。
- 唯一能捕获所有焦点入口的事件是
focusin（注意不是focus） - 在
focusin回调里，用modalEl.contains(document.activeElement)判断焦点是否还在区域内 - 如果不包含，立刻
event.preventDefault()，再手动focus()到第一个或最后一个可聚焦子元素 - 别忘了给遮罩层加
tabindex="-1"，否则它本身会成为可聚焦节点，干扰判断
label 上空格键误触复选框怎么防
当 <label for="xxx"></label> 被 Tab 进去后，空格键默认会触发关联控件的 click，这在表单中常导致状态错乱。这不是 bug，是 HTML 规范行为，但业务上往往不需要。
- 给
label绑定keydown事件，检测event.code === 'Space' - 匹配时立即
event.preventDefault()，阻止默认点击行为 - 如果确实需要空格触发操作，改用显式按钮（
<button></button>）包裹内容，而非依赖 label 关联 - 不要用
blur()或移除tabindex来规避——这会破坏可访问性，屏幕阅读器无法识别交互目标
input 边框变化导致布局跳动怎么稳住
焦点样式改 border 宽度是最常见的跳动原因：默认 1px → :focus 3px，盒模型尺寸突变，周围元素被挤开。
- 统一所有状态下的
border-width，例如始终设为2px solid transparent，只变颜色 - 慎用
outline替代：它不占布局空间，但无法控制圆角、阴影等视觉细节，且部分屏幕阅读器依赖 outline 做焦点指示 - 确保全局
box-sizing: border-box已启用，否则 padding/border 叠加计算容易出偏差 - 如果用了 CSS 自定义属性（如
--focus-border），记得在 :focus 里只覆盖 color，不重写 width
真正难的不是写对某一行代码，而是每次加新交互前，先想清楚：这个操作到底是让用户「填内容」，还是「走流程」？前者要放行，后者才接管。漏掉这个判断，后面所有 focus/blur/keydown 都是白忙。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
