如何在 angular.js 中检测 keydown 或 keypress 事件? [英] How can I detect keydown or keypress event in angular.js?

问题描述

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

这是我的 HTML:

 
<label for="mobile_number">手机号码</label><input type="text" id="mobile_number" placeholder="[phone]" 需要ngcontroller="RegisterDataController" ng-keydown="keydown">

还有我的控制器:

 function RegisterDataController($scope, $element) {console.log('注册数据控制器');console.log($element);$scope.keydown = 函数(keyEvent){console.log('keydown -'+keyEvent);};}

我不确定如何在 angular.js 中使用 keydown 事件，我也搜索了如何正确使用它.我可以验证我对指令的输入吗?或者我应该像我所做的那样使用控制器来使用 keydown 或 keypress 等事件?

解决方案

更新:

ngKeypress、ngKeydown 和 ngKeyup 现在是 AngularJS 的一部分.

<!-- 例如，您可以指定要计算的表达式 --><输入ng-keypress=计数=计数+1"；ng-init=计数=0"><!-- 或调用控制器/指令方法并将 $event 作为参数传递.通过访问 $event 你现在可以做类似的事情查找按下了哪个键 --><input ng-keypress="changed($event)">

在此处阅读更多信息:

https://docs.angularjs.org/api/ng/directive/ngKeypresshttps://docs.angularjs.org/api/ng/directive/ngKeydownhttps://docs.angularjs.org/api/ng/directive/ngKeyup

早期的解决方案:

解决方案 1:使用 ng-change 和 ng-model

JS:

function RegisterDataController($scope) {$scope.keydown = function() {/* 在这里验证 $scope.mobileNumber*/};}

解决方案 2. 使用 $watch

JS:

$scope.$watch("mobileNumber", function(newValue, oldValue) {/* 变化注意到 */});

I'm trying to get the value of a mobile number textbox to validate its input value using angular.js. I'm a newbie in using angular.js and not so sure how to implement those events and put some javascript to validate or manipulate the form inputs on my html code.

This is my HTML:

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

And my controller:

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

I'm not sure how to use the keydown event in angular.js, I also searched how to properly use it. And can i validate my inputs on the directives? Or should I use a controller like what I've done to use the events like keydown or keypress?

解决方案

Update:

ngKeypress, ngKeydown and ngKeyup are now part of 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)">

Read more here:

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

Earlier solutions:

Solution 1: Use ng-change with 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*/
   };
}

Solution 2. Use $watch

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

JS:

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

这篇关于如何在 angular.js 中检测 keydown 或 keypress 事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！