Question

我有以下$broadcast来捕捉Angular中的按键：

$document.bind('keypress', function(event) {
    var key = event.which;
    $rootScope.$broadcast('keypress', event);
    $rootScope.$broadcast('keypress:' + key, event);
});

我听$on

但是，我想检测何时同时按下两个键，同时按下enter和s（不是一个组合后跟另一个组合）。

这样做的最佳方式是什么？

修改

我的想法是：

var keys = [];
$document.bind('keydown', function(event) {
    keys[event.which] = true;
});
$document.bind('keyup', function(event) {
    delete keys[event.which];
});

$document.bind('keypress', function(event) {
    var key = event.which;
    var keysPressed = [];
    angular.forEach(keys, function(value, key) {
        keysPressed += 'keypress:' + key;
    });
    $rootScope.$broadcast('keypress', event);
    $rootScope.$broadcast(keysPressed, event);
});

因此，如果我有多个按键，那么我会创建正确的$broadcast。然而，问题在于订单现在很重要（例如，如果我按a然后按enter，那么$broadcast就是keypress:58keypress:13，如果按其他方式，我得到keypress:13keypress:58）

Answer 1

在我看来，广播的使用方式太多了。相反，也许使用自定义指令？这是用户按下 Shift + Tab 的示例，它会触发如下事件：

<input on-shift-tab="prevStep($event,'email')" />

app.directive('onShiftTab', function() {
return function(scope, element, attrs) {
    var map = {9: false, 16: false};

    element.on("keydown", function(event) {
        if (event.which in map) {
            map[event.which] = true;
            if (map[9] && map[16]) {
                scope.$apply(function(){
                    scope.$eval(attrs.onShiftTab, {'$event': event});
                });
                event.preventDefault();
            }
        }
    });
    element.on("keyup", function(event) {
        if (event.which in map) {
            map[event.keyCode] = false;
        }
    });
};
})

Answer 2

关于这个问题的jQuery答案非常有效地解决了这个问题，这里有一些Angular特定的方法：

How to watch for a keypress combination in Angularjs?

该讨论中的一名来自连续两次按下向上的事件：

http://plnkr.co/edit/t016cWzbH3D37m2bAU4Y

上面的示例能够实现与jQuery答案相同的效果，但只使用一个keyup事件侦听器而不是keyup和keydown。还可以很好地使用$ broadcast来触发另一个$ on事件：

var upHitOnce = false;

$(document).keyup(function(event) {
    if (event.which == 38) {
      if (upHitOnce) {
        $rootScope.$broadcast('DoubleUpFired');
        $rootScope.$apply();
        upHitOnce = false;
      } else {
        upHitOnce = true;
      }
    } else {
      upHitOnce = false;
    }
  });

检测{strong>同时按键，例如ctrl+r稍微复杂一些;这是一个jsfiddle，其中包含如何在Angular中执行此操作的示例：

http://jsfiddle.net/firehist/nzUBg/

Answer 3

对于修饰键（Ctrl，Alt，Shift），它更简单，因为有event.ctrlKey, event.altKey, event.shiftKey。但是对于没有修饰键，你应该使用像Detect multiple keys on single keypress event in jQuery这样的问题：

var map = {68: false, 69: false, 86: false};

$(document).keydown(function(e) {
    if (e.keyCode in map) {
        map[e.keyCode] = true;
        if (map[68] && map[69] && map[86]) {
            // FIRE EVENT
        }
    }
}).keyup(function(e) {
    if (e.keyCode in map) {
        map[e.keyCode] = false;
    }
});

Answer 4

AngularJS有一个模块可以完全捕获并且使用非常简单：angularHotkeys

这是控制器中生成的代码的示例：

hotkeys.add({
  combo: 'return+s',
  description: 'Shortcut description...',
  callback: function() {
    // your code here
  }
});

AngularJS - 同时进行多次按键

4 个答案: