Question

我正在尝试获取移动号码文本框的值，以使用angular.js验证其输入值。我是使用angular.js的新手，并不太确定如何实现这些事件并使用一些javascript来验证或操纵我的html代码上的表单输入。

这是我的HTML：

    <div>
        <label for="mobile_number">Mobile Number</label>
        <input type="text" id="mobile_number" placeholder="+639178983214" 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等事件？

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="+639178983214" 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="+639178983214" ng-model="mobileNumber" 
ng-controller="RegisterDataController">

JS：

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

Answer 2

您在输入上使用“ng-keydown”属性进入了正确的轨道，但是您错过了一个简单的步骤。仅仅因为你将ng-keydown属性放在那里，并不意味着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);
             });
        }
    };
});

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

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

然后在您的控制器中（就像您已经拥有的那样），您可以在控制器的范围内添加一个名为“onKeydown”的函数，如下所示：

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

希望这对您或想要了解的其他人有帮助

Answer 3

您可以签出Angular UI @ http://angular-ui.github.io/ui-utils/，它提供详细信息事件句柄回调函数，用于检测keydown，keyup，keypress （还有输入键，退格键，改变键，控制键）

<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>

Answer 4

使用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方法放置支票和其他条件。

如何在angular.js中检测keydown或keypress事件？

4 个答案:

更新