按下Shift+Tab时key.shift返回false的原因及捕获方法

这个问题我之前踩过坑，大概率是这几个原因导致的：

常见原因 #

1. 监听了错误的事件类型
   如果你用的是keyup事件，很容易出现这个问题。因为用户按下Shift+Tab后，通常会先松开Shift键再松开Tab键——此时触发keyup事件时，Shift已经不再处于按下状态，对应的Shift相关属性自然会是false。而keydown事件是在按键按下的瞬间触发，此时Shift和Tab都处于按下状态，能准确检测到组合键。

2. 用错了事件属性
   标准浏览器键盘事件（KeyboardEvent）里，判断Shift键是否按下的属性是event.shiftKey（布尔值），而不是key.shift——这个key.shift大概率不是标准属性，可能是你用的某个框架或自定义封装里的错误写法，自然会返回false。

3. 浏览器默认行为干扰
   Shift+Tab是浏览器默认的「焦点上移/切换」快捷键，如果你没有阻止默认行为（event.preventDefault()），某些场景下事件的处理顺序可能会导致属性读取异常，不过这种情况相对少见。

正确捕获Shift+Tab的方法 #

直接用原生JavaScript的keydown事件配合event.shiftKey和event.key来检测就很稳妥，示例代码如下：

// 监听全局键盘按下事件
document.addEventListener('keydown', function(event) {
  // 检测是否同时按下了Shift和Tab
  if (event.shiftKey && event.key === 'Tab') {
    console.log('Shift+Tab组合键被触发了！');
    // 如果需要阻止浏览器默认的焦点切换行为，就加上这行
    event.preventDefault();
  }
});

如果是在特定元素（比如输入框）里监听，只需要把document换成对应的元素DOM对象就行。

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