如何在Angular中检测Shift + 右箭头 + 其他键

Question

我在使用angular 1.2.3时，遇到了检测shift+右箭头+p的问题。
当只有右箭头+p时，没有问题，但是一旦加入了shift键，就会出现问题。

问题在于如何检测同时按下三个键：SHIFT + RIGHT ARROW + P

这里提供一个可行的示例：plunker

var app = angular.module('keyboardDemo', []);

app.controller('MainCtrl', function($scope, $timeout) {
    /**
     * 39 (right arrow)
     * 80 (p)
     */
    var map = {39: false, 80: false};

    $scope.onKeyUp = function(event){
        if (map[39] && map[80]) {
            $scope.data.message1 = "P + RIGHT pressed!";
            $timeout(function(){
               $scope.data.message1 = '';
            }, 1000);
        }

        if (event.shiftKey && map[39] && map[80]) {
            $scope.data.message2 = "SHIFT + P + RIGHT pressed!";
            $timeout(function(){
               $scope.data.message2 = '';
            }, 1000);
        }

        var keyCode = getKeyboardEventCode(event);
        if (keyCode in map) {
            clearKeyCode(keyCode);
        }
    };


    $scope.onKeyDown = function(event){
        var keyCode = getKeyboardEventCode(event);
        if (keyCode in map) {
            map[keyCode] = true;
        }
    }


    var getKeyboardEventCode = function (event) {
        return parseInt((window.event ? event.keyCode : event.which));
    };

    function clearKeyCode(code){
        map[code] = false;
    }

    $scope.data = {
      'message1': '',
      'message2': ''
    };
});

- gandra404

---

我不知道我是否理解你想做什么，但是你的 Plunker 对我来说运行良好。 - Okazari

只有按下P + RIGHT ARROW时才能正常工作。会出现消息“P + RIGHT pressed！”但是当您按下“SHIFT + P + RIGHT ARROW”时，应该出现消息“SHIFT + P + RIGHT pressed！”但我没有看到这个消息。 - gandra404

可能是浏览器问题吗？我在macOS上使用Chrome，当我按下“SHIFT + P + RIGHT ARROW”并释放键时，我会看到两条消息。 - Okazari

感谢@Okazari提供的非常有用的信息。我正在寻找适用于所有主要浏览器的解决方案。我已经在Windows上尝试了Chrome，IE9和Firefox，但对我没有起作用。 - gandra404

由于我无法重现，我将尝试在家中的Windows上进行测试。如果它仍然有效，这将很难发现。 - Okazari

@Okazari，我发现它可以使用左移按钮，但不能使用右移按钮。您能否发布一些答案，例如代码是正确的，最终与左右移位有关的问题是另一个问题。我想接受您的答案。 - gandra404

Answer 1

如评论中所说，您的代码实际上运行良好。在macOS上使用Chrome时，当我按下“SHIFT + P + RIGHT ARROW”并释放键时，我可以看到两条消息。

- Okazari