本文介绍使用原生 KeyboardEvent.shiftKey 属性替代自定义布尔变量，安全、可靠地实现 Tab/Shift+Tab 的缩进控制逻辑，彻底避免跨标签页按键状态不同步导致的逻辑错误。
本文介绍使用原生 `keyboardevent.shiftkey` 属性替代自定义布尔变量，安全、可靠地实现 tab/shift+tab 的缩进控制逻辑，彻底避免跨标签页按键状态不同步导致的逻辑错误。
在构建 Web 端富交互应用（如待办清单）时，常需拦截默认 Tab 导航行为，将其重定义为文本缩进操作。许多开发者会采用“监听 Shift 按下/释放 → 设置全局标志位 → 在 Tab 事件中读取该标志”的模式，例如：
let shift_pressed = false;
document.addEventListener('keydown', (e) => {
if (e.key === 'Shift') shift_pressed = true;
});
document.addEventListener('keyup', (e) => {
if (e.key === 'Shift') shift_pressed = false;
});
document.addEventListener('keydown', (e) => {
if (e.key === 'Tab') {
e.preventDefault();
if (shift_pressed) minus_indent();
else plus_indent();
}
});
该方案存在严重缺陷：当用户在当前页面按下 Shift 后，再通过 Ctrl+Shift+Tab 切换浏览器标签页，keyup 事件将触发在新激活的页面或浏览器 UI 上，而非你的页面——导致 shift_pressed 永远卡在 true，后续所有 Tab 操作均误判为 Shift+Tab。
更复杂的是，引入 ctrl 变量做联合判断（如仅在 !ctrl 时更新 shift_pressed）反而引发新问题：若用户用鼠标点击切回页面，Ctrl 键从未在本页释放，ctrl 标志持续为 true，致使 Shift 功能被意外屏蔽。
✅ 正确解法：完全弃用自定义状态变量，直接使用事件对象内置的修饰键属性。
现代浏览器 KeyboardEvent 接口原生提供 shiftKey、ctrlKey、altKey 和 metaKey 布尔属性，它们实时反映该次按键事件发生时所有修饰键的物理状态，且不受焦点切换影响——即使 Shift 是在上一页面按下的，只要它在当前 Tab 键按下瞬间仍处于按下状态，event.shiftKey 就为 true。
优化后的代码简洁、健壮、无副作用：
document.addEventListener('keydown', function (event) {
if (event.key === 'Tab') {
event.preventDefault(); // 阻止默认焦点跳转
if (event.shiftKey) {
minus_indent(); // Shift+Tab：减少缩进
} else {
plus_indent(); // Tab：增加缩进
}
}
});
? 补充说明：event.shiftKey 的判定基于操作系统级按键状态，与事件目标是否在当前文档、甚至是否在前台标签页无关。它是浏览器内核直接注入到事件对象中的可靠快照。
注意事项与最佳实践：
- 无需监听 keydown/keyup 来维护 Shift 状态，避免一切状态同步风险；
- 若需同时检测 Ctrl+Tab 或 Alt+Tab，可组合使用 event.ctrlKey、event.altKey；
- 始终优先调用 event.preventDefault() 再执行业务逻辑，防止部分浏览器因异步执行导致默认行为已触发；
- 在生产环境建议添加 event.target 类型检查（如仅对
至此，你不再需要对抗浏览器多标签页的焦点生命周期，只需信任标准 API —— 简洁即健壮，原生即可靠。
