如何检测在 Javascript keyup 事件中何时按下 Shift+NumKey？

Question

我编写了以下代码，如果在键盘上按下 [Shift]，则写入控制台“true”，否则写入“false”。<script>    var el = document.getElementById("myInput");    el.addEventListener("keyup", function (e) {                    console.log(e.shiftKey);                });</script>出于某种原因，当通过按 10 键上的数字触发事件时，此代码不起作用。如果我按住 Shift 并按 Numpad5，它会记录错误。我在 Chrome、Firefox 和 IE 中看到了相同的行为。当按下 10 键上的数字时，我需要能够检测用户是否按住 [Shift]。编辑：为了回应@sagar 的评论，我专门用 1-10 键进行了测试，因为这是我希望我的用户按下的键。其他键暂时将被忽略。我希望能够判断用户何时按下数字 1-10 的键以及是否按下了 [Shift]。

Answer 1

使用用户必须按下才能执行此操作的键号创建一个对象：

const KeysEnum = {

        "ENTER": 16,

        "SHIFT": 13,

}

let keysPressed = {

};

const handleEventShiftAndEnterPress = () => {

      console.log ('User Press Shift Enter');

}

window.document.addEventListener ('keydown', function (event) {

      keysPressed[event.keyCode.toString()] = true;

    if (keysPressed [KeysEnum.SHIFT] && keysPressed [KeysEnum.ENTER]) {

       handleEventShiftAndEnterPress ();

       keysPressed [KeysEnum.SHIFT] = false; 

      keysPressed [KeysEnum.ENTER] = false;

    }

});

只要你控制击键对象，你就可以随时做和知道每个键的状态，所以很容易做你需要的:)

Answer 2

你可以e.getModifierState("NumLock") status根据它是 ON 还是 OFF来确定你的条件，因为当它打开时你e.shiftKey是false，如果它关闭你e.shiftKey是true

按Num lock测试

var el = document.getElementById("myInput");

el.addEventListener("keyup", function(e) {

  console.log(e.getModifierState("NumLock"))

});

<input type="text" id="myInput" />

Answer 3

不幸的是，这似乎是 Windows 操作系统的一种限制，我不知道为什么存在这种限制。我在 StackOverflow 上看到过开发人员在其他上下文中遇到同样问题的例子。

现在，这里有一个似乎有效的解决方案。我不喜欢它，我认为我不应该这样做，但这是我能找到的最好的东西。

我发现当 NumLock 开启时，如果我按住 [Shift] 并按下 [Num5]，则会在 [Num5] 的 keydown 事件之前立即触发来自 [Shift] 的 keyup 事件。在我的工作站上，如果我获取这两个事件的时间戳，它们将是 5 毫秒或更短的部分。我只是编写了代码来检查这两个时间戳，如果它们相距 10 毫秒或更短，我的应用程序就会响应输入，考虑到用户按住 [Shift] 并按下 [Num5]。

由于此代码在浏览器中运行，我认为其他平台不会有此限制，它仍然会检查事件以指示 [Shift] 被按下。