如何在angular.js中检测按键按下或按键按下事件？

Question

我正在尝试使用angular.js获取手机号码文本框的值以验证其输入值。我是一个angular.js的新手，不太确定如何实现这些事件并在我的HTML代码中放置一些JavaScript来验证或操作表单输入。

这是我的HTML:

    <div>
        <label for="mobile_number">Mobile Number</label>
        <input type="text" id="mobile_number" placeholder="[phone]" required
           ngcontroller="RegisterDataController" ng-keydown="keydown">
    </div> 

我的控制器:

    function RegisterDataController($scope, $element) {
       console.log('register data controller');
       console.log($element);
       $scope.keydown = function(keyEvent) {
        console.log('keydown -'+keyEvent);
       };
    }

我不确定如何在angular.js中使用“keydown”事件，我也搜索了如何正确使用它。我能否在指令上验证我的输入？还是应该像我使用“keydown”或“keypress”事件一样使用控制器？

- abelski

Answer 1

更新:

ngKeypress, ngKeydown和ngKeyup现在已经成为AngularJS的一部分。

<!-- you can, for example, specify an expression to evaluate -->
<input ng-keypress="count = count + 1" ng-init="count=0">

<!-- or call a controller/directive method and pass $event as parameter.
     With access to $event you can now do stuff like 
     finding which key was pressed -->
<input ng-keypress="changed($event)">

阅读更多信息：

https://docs.angularjs.org/api/ng/directive/ngKeypress https://docs.angularjs.org/api/ng/directive/ngKeydown https://docs.angularjs.org/api/ng/directive/ngKeyup

早期解决方案：

解决方案1：使用ng-change与ng-model

<input type="text" placeholder="[phone]" ng-model="mobileNumber" 
ng-controller="RegisterDataController" ng-change="keydown()">

JS：

function RegisterDataController($scope) {       
   $scope.keydown = function() {
        /* validate $scope.mobileNumber here*/
   };
}

解决方案2. 使用$watch

<input type="text" placeholder="[phone]" ng-model="mobileNumber" 
ng-controller="RegisterDataController">
    

JS:

->

JS：

$scope.$watch("mobileNumber", function(newValue, oldValue) {
    /* change noticed */
});

- AlwaysALearner

---

使用截至目前为止的最新稳定版本（1.0.8）进行工作。 - ALOToverflow

Answer 2

你在输入框中使用了"ng-keydown"属性，这是正确的，但你错过了一个简单的步骤。仅仅添加"ng-keydown"属性并不能让Angular知道如何处理它。这就需要用到指令。你正确地使用了该属性，但现在需要编写一个指令，告诉Angular当它在HTML元素中看到该属性时该怎么做。

以下是一个示例，展示如何编写该指令。我们将把指令从"ng-keydown"重命名为"on-keydown"（以避免违反here中提到的“最佳实践”）：

var mod = angular.module('mydirectives');
mod.directive('onKeydown', function() {
    return {
        restrict: 'A',
        link: function(scope, elem, attrs) {
             // this next line will convert the string
             // function name into an actual function
             var functionToCall = scope.$eval(attrs.ngKeydown);
             elem.on('keydown', function(e){
                  // on the keydown event, call my function
                  // and pass it the keycode of the key
                  // that was pressed
                  // ex: if ENTER was pressed, e.which == 13
                  functionToCall(e.which);
             });
        }
    };
});

该指令简单地告诉Angular，当它看到一个名为"ng-keydown"的HTML属性时，应该监听具有该属性的元素，并调用传递给它的任何函数。在HTML中，您将拥有以下内容：

<input type="text" on-keydown="onKeydown">

然后在您的控制器中（就像您已经有的那样），您将向控制器的作用域添加一个名为“onKeydown”的函数，如下所示：

$scope.onKeydown = function(keycode){
    // do something with the keycode
}

希望这能帮助你或其他想了解此事的人。

- tennisgent

---

指令名称不应该是'ng-keydown'吗？ - ALOToverflow

正如这里所解释的那样，指令名称会被标准化。这意味着如果您希望您的HTML属性为ng-my-attribute，则应将指令名称写为'ngMyAttribute'。每个大写字母都会变成小写，并在前面加上一个-。在Javascript中，这是很常见的，因为它允许使用连字符字符串作为Javascript对象中的键。 - tennisgent

你不应该使用 "ng" 前缀来命名你的指令，因为这是 Angular 指令所保留的。最好的做法是使用自己的前缀。 - Dave

没错。我只是想让它简单明了，但我会编辑答案以避免任何混淆。 - tennisgent

Answer 3

使用ng-controller的JavaScript代码：

$scope.checkkey = function (event) {
  alert(event.keyCode);  //this will show the ASCII value of the key pressed

在HTML中:

}

<input type="text" ng-keypress="checkkey($event)" />

现在，您可以使用keyCode方法来放置您的检查和其他条件。

- Prateek

Answer 4

您可以查看Angular UI @ http://angular-ui.github.io/ui-utils/，该工具提供了详细的事件处理回调函数，用于检测键盘按下、松开和按键（包括Enter键、退格键、Alt键、Ctrl键）。

<textarea ui-keydown="{27:'keydownCallback($event)'}"></textarea>
<textarea ui-keypress="{13:'keypressCallback($event)'}"></textarea>
<textarea ui-keydown="{'enter alt-space':'keypressCallback($event)'}"> </textarea>
<textarea ui-keyup="{'enter':'keypressCallback($event)'}"> </textarea>

- JQuery Guru