自定义Tab缩进功能中，如何避免Ctrl+Shift+Tab导致shift_pressed变量异常？

你的核心问题在于手动维护shift_pressed和ctrl状态变量时，无法捕获用户在其他标签页释放按键的事件，导致变量保留错误值。这里提供两种直接有效的解决思路：

方案一：利用事件原生属性，彻底避免状态维护 #

不需要手动跟踪Shift/Ctrl的状态，直接使用键盘事件对象自带的shiftKey和ctrlKey属性，一步到位解决问题：

document.addEventListener('keydown', function (event) {
    if (event.key === "Tab") {
        // 仅当未按住Ctrl时，拦截Tab的默认导航行为
        if (!event.ctrlKey) {
            event.preventDefault();
            // 直接通过event.shiftKey判断是否是Shift+Tab组合
            event.shiftKey ? minus_indent() : plus_indent();
        }
    }
});

优势 #

• 完全不需要维护额外状态变量，从根源消除状态残留的可能
• 自动兼容所有标签页切换场景，不管用户用快捷键还是点击标签返回，逻辑都能正常工作
• 代码更简洁，减少出错概率

方案二：重置状态变量（适配原有逻辑） #

如果你想保留原有代码结构，只需添加页面焦点/可见性监听，在页面失去焦点时重置所有状态变量：

// 初始化状态变量
let shift_pressed = false;
let ctrl = false;

// 原有按键监听逻辑
document.addEventListener('keyup', function (event) {
    if (event.key === 'Shift') {
        shift_pressed = false;
    } else if (event.key === "Control") {
        ctrl = false;
    }
});

document.addEventListener('keydown', function (event) {
    if (event.key === 'Shift') {
        if (!ctrl) {
            shift_pressed = true;
        }
    } else if (event.key === "Control") {
        ctrl = true;
    } else if (event.key === "Tab") {
        event.preventDefault();
        shift_pressed ? minus_indent() : plus_indent();
    }
});

// 监听页面可见性变化，后台时重置状态
document.addEventListener('visibilitychange', () => {
    if (document.visibilityState === 'hidden') {
        shift_pressed = false;
        ctrl = false;
    }
});

// 监听页面失焦事件，补充覆盖更多场景
window.addEventListener('blur', () => {
    shift_pressed = false;
    ctrl = false;
});

说明 #

• visibilitychange事件会在标签页切换到后台时触发，此时强制重置状态，确保用户返回时变量为初始值
• blur事件作为补充，覆盖用户点击浏览器地址栏、其他应用窗口等失焦场景
• 双重监听确保所有离开页面的场景都能重置状态，避免错误残留

内容的提问来源于stack exchange，提问作者Djaro