人们在我的选项卡上按下 Shift 键，但在另一个选项卡上松开它。如何防止 Ctrl+Shift+Tab 破坏我的“shift_pressed”变量？

Question

我正在开发一个待办事项列表浏览器应用程序（用 JavaScript、HTML 和 CSS 编写，没有 jQuery），我想为 tab 和 shift + tab 添加自定义行为，因为这些应该是缩进而不是缩进导航。由于无法直接捕获组合键，因此我创建了一个

shift_pressed

变量来检测何时按下 shift：

document.addEventListener('keyup', function (event) {
    if (event.key === 'Shift') {
        shift_pressed = false;
    }
});

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

只要用户停留在我的选项卡上，这效果就很好。但是，当有人使用 control+shift+tab 移至浏览器中的上一个选项卡时，他们在我的选项卡上按 shift，导致

shift_pressed

变量变为

true

。然后，他们将其释放到另一个选项卡上，导致

shift_pressed

保持

true

，即使他们返回。然后他们需要再次按下并释放 shift 来修复它。

我决定，如果问题是control+shift+tab，那么我们也可以抓住控制权。所以我这样做了：

document.addEventListener('keyup', function (event) {
    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;
    }

只要人们仅使用 control+tab 或 control+shift+tab 导航选项卡，就可以了。 当他们离开时，必须按下 control，当他们返回时，必须在我的选项卡上释放 control，这样就可以了。

问题是，如果有人使用 control+shift+tab 离开，那么

shift_pressed

可能会保留

false

，但

ctrl

会变成

true

。如果他们随后不使用 control+tab 导航回来（这会将

ctrl

设置回

false

），而是通过单击浏览器中的选项卡，

ctrl

仍为

true

。这意味着 shift 完全无法使用，直到他们再次按下并释放 control。

Answer 1

我认为你不需要自己动手。您可以只检查现有的

shiftKey

修饰符（也存在修改过的

ctrlKey

）。

   if (event.key === "Tab") {
        event.preventDefault();
        if (event.shiftKey) {
            minus_indent();
        } else {
            plus_indent();
        }
    }

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/shiftKey
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/ctrlKey

Answer 2

您可以确保在切换选项卡时重置布尔值，为此，您可以使用以下命令：

document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === "hidden") {
    shift_pressed = false;
    ctrl = false;
  }
});