如何在switch-case语句中处理Shift+Tab组合键事件？

你之前的写法不生效，是因为每一次键盘事件触发时，event.key 只会返回当前触发事件的单个按键值。按下Shift+Tab时会产生两个独立的keydown事件：第一次触发Shift的按键事件，event.key为"Shift"；第二次触发Tab的按键事件，event.key为"Tab"。所以在Shift对应的case分支中，event.key永远不会等于"Tab"，内层判断自然不会执行。

解决方案 #

方案1：在单按键case内通过修饰键属性判断

事件对象原生提供了修饰键状态属性event.shiftKey、event.ctrlKey、event.altKey、event.metaKey，只要触发按键事件时对应修饰键处于按下状态，属性值就为true，你可以直接在Tab的case分支内判断是否按下了Shift：

switch(event.key) {
  case "Tab":
    if (event.shiftKey) {
      // Shift+Tab 组合键处理逻辑
      event.preventDefault(); // 如需阻止默认后退焦点行为可以加这行
    } else {
      // 单独按下 Tab 的处理逻辑
    }
    break;
  // 其他按键的处理case
  default:
    break;
}

方案2：拼接组合键标识作为switch判断条件

如果你的项目中组合键规则较多，可以提前把修饰键和按键名拼接成统一的组合标识，直接在switch的case中匹配：

// 可以按需扩展ctrl、alt等修饰键的拼接规则
const currentKey = event.key;
const combinationKey = event.shiftKey ? `Shift+${currentKey}` : currentKey;

switch(combinationKey) {
  case "Shift+Tab":
    // Shift+Tab 组合键处理逻辑
    break;
  case "Tab":
    // 单独按下 Tab 的处理逻辑
    break;
  // 其他组合键的case，比如 "Shift+ArrowUp" 等
  default:
    break;
}

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