Javascript：如何处理 switch case 内的 Shift + Tab？

Question

所以我一直使用嵌套的

if-else

和

event.which

来处理所有键盘导航，但我想更改为

switch-case

和

event.key

。

我在处理 Shift+Tab 事件时遇到麻烦。
我试过了：

switch(event.key){
  case "Shift":
    console.log("entering shift");
    if(event.key === "Tab"){//do something}
    console.log("exiting shift");
    break;
  case "Tab":
    //handling only tab events
    break;
}

但这似乎不起作用。控制进入移位块和离开移位块，不进入

if(event.key === "Tab")

部分。因此，我无法处理

SHIFT

+

TAB

。

也尝试了

case "Shift" && "Tab":{}

，但这阻碍了仅

Tab

的块。

有没有办法处理

SHIFT

+

TAB

里面的

switch-case

。

Answer 1

switch(event.key){
  case "Shift":
    console.log("entering shift");
//you enter this case because event.key === "Shift"
//so event.key === "Tab" will always be false
    if(event.key === "Tab"){//do something}
    console.log("exiting shift");
    break;

我认为你真的不需要在这里使用

switch

，因为一些简单的

if

就可以了：

let shift = false;
document.addEventListener('keydown', event => {
  if (event.key === 'Shift') {
     shift = true;
  }
});
document.addEventListener('keyup', event => {
   if (event.key === 'Shift') {
      shift = false;
   }

   if (event.key === 'Tab' && shift) {
      //do stuff
   }
  }
});

Answer 2

使用 KeyboardEvent.shiftKey 布尔值来检测在 keydown 事件期间是否按住 Shift 键：

const elTextarea = document.querySelector("#textarea");

elTextarea.addEventListener("keydown", (evt) => {
  
  if (evt.key === "Tab") {
    evt.preventDefault(); // Prevent blur on Tab key
    
    if (evt.shiftKey) {
      console.log("Tab + Shift");
    } else {
      console.log("Tab");
    }
  }
  
});

<textarea id="textarea"></textarea>