如何检测AngularJS点击时按下的键答案

【问题标题】：How to detect pressed keys on the click of AngularJS如何检测AngularJS点击时按下的键
【发布时间】：2014-07-02 08:22:53
【问题描述】：

我在一个 Web 应用程序上使用 angularjs，我需要弄清楚如何检测像 ctrl、shift 或 alt这样的键> 当我点击某处时被按下。

例如，使用 jQuery，我可以通过访问 Click 函数参数来做到这一点。

是否有一些开箱即用的方法来获取有关角度的信息？

【问题讨论】：

标签： javascript angularjs dom-events keypress

【解决方案1】：

由于我不确定每个浏览器提供什么，我会这样做：

shiftPressed = event.shiftKey || (event.keyCode === 16);

例如在 Chorme 上，我在点击事件上看不到任何 event.keyCode：

altKey: false
bubbles: true
button: 0
buttons: 0
cancelBubble: false
cancelable: true
clientX: 753
clientY: 193
ctrlKey: false
currentTarget: null
defaultPrevented: false
detail: 1
eventPhase: 0
fromElement: null
isDefaultPrevented: ()
isImmediatePropagationStopped: ()
isTrusted: true
isTrusted: true
layerX: 4
layerY: -15
metaKey: false
movementX: 0
movementY: 0
offsetX: 4
offsetY: -15
pageX: 1381
pageY: 193
path: Array[16]
relatedTarget: null
returnValue: true
screenX: 753
screenY: 278
shiftKey: true
srcElement: span.glyphicon.glyphicon-plus
stopImmediatePropagation: ()
target: span.glyphicon.glyphicon-plus
timeStamp: 1445613423528
toElement: span.glyphicon.glyphicon-plus
type: "click"
view: Window
webkitMovementX: 0
webkitMovementY: 0
which: 1
x: 753
y: 193

【讨论】：

【解决方案2】：

在你的 html 中

<button ng-click="doSomething($event)"></button>

在你的 js 中

$scope.doSomething = function($event)
{
if ($event.altKey){}
if ($event.ctrlKey){}
if ($event.shiftKey){}
}

【讨论】：

比所有其他选择要简单得多。当我需要检查 Ctrl 键时效果很好
注意：ctrlKey 在 mac 上无法正常工作，因为这会触发上下文菜单。 Mac 为此使用命令键。
@PMBjornerud 那么你如何检测命令键。你能发布一个代码sn-p什么的。谢谢
我目前没有我使用的代码。也许在这里？：stackoverflow.com/questions/3902635/…
我们可以使用 ng-change 来执行此操作吗，我的 ng-change 正在检测更改，但是我想检查是否通过单击 ctrl 键触发了 ng-change，以便我可以打开在新标签中。

【解决方案3】：

如果您尝试捕获组合键，例如 Ctrl-Enter，您可以查看窗口对象

例如查找 Ctrl-Enter 使用

if(window.event.keyCode == 13 && window.event.ctrlKey == true)

【讨论】：

对于 Angular，您应该使用 $event 而不是 window.event。

【解决方案4】：

看看这个关于AngularJS key handling的漂亮东西

所以 Ctrl, shift, alt 的键码是

Ctrl - 17
Alt - 18
Shift - 16

Working Demo

HTML

<!DOCTYPE html>
<html>
<head>
  <script src="angular.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app="mainModule">
  <div ng-controller="mainController">
    <label>Type something:
      <input type="text"
             ng-keydown="onKeyDown($event)"
             ng-keyup="onKeyUp($event)"
             ng-keypress="onKeyPress($event)" />
    </label><br />
    <strong>KEY DOWN RESULT:</strong> {{onKeyDownResult}}<br />
    <strong>KEY UP RESULT:</strong> {{onKeyUpResult}}<br />
    <strong>KEY PRESS RESULT:</strong> {{onKeyPressResult}}
  </div>
</body>
</html>

脚本

angular.module("mainModule", [])
  .controller("mainController", function ($scope)
  {
    // Initialization
    $scope.onKeyDownResult = "";
    $scope.onKeyUpResult = "";
    $scope.onKeyPressResult = "";

    // Utility functions

    var getKeyboardEventResult = function (keyEvent, keyEventDesc)
    {
      return keyEventDesc + " (keyCode: " + (window.event ? keyEvent.keyCode : keyEvent.which) + ")";
    };

    // Event handlers
    $scope.onKeyDown = function ($event) {
      $scope.onKeyDownResult = getKeyboardEventResult($event, "Key down");
    };

    $scope.onKeyUp = function ($event) {
      $scope.onKeyUpResult = getKeyboardEventResult($event, "Key up");
    };

    $scope.onKeyPress = function ($event) {
      $scope.onKeyPressResult = getKeyboardEventResult($event, "Key press");
    };
  });

【讨论】：

完美，它完美运行，只需要添加 $event。谢谢

【解决方案5】：

没有使用纯 JS 的“自动化”方式，但在全局变量中跟踪修饰键的状态相对简单。例如

window.ctrlDown = false;

document.addEventListener('keydown', function(evt) {
  var e = window.event || evt;
  var key = e.which || e.keyCode;
  if(17 == key) {
    window.ctrlDown = true;
  }
}, false);

document.addEventListener('keyup', function(evt) {
  var e = window.event || evt;
  var key = e.which || e.keyCode;
  if(17 == key) {
    window.ctrlDown = false;
  }
}, false);

【讨论】：