Html 如何在 angular.js 中检测 keydown 或 keypress 事件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18360202/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I detect keydown or keypress event in angular.js?
提问by abelski
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.
我正在尝试获取手机号码文本框的值以使用 angular.js 验证其输入值。我是使用 angular.js 的新手，不太确定如何实现这些事件并放置一些 javascript 来验证或操作我的 html 代码上的表单输入。
This is my 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>
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?
我不确定如何在 angular.js 中使用 keydown 事件，我还搜索了如何正确使用它。我可以验证我对指令的输入吗？或者我应该使用像我所做的那样的控制器来使用诸如 keydown 或 keypress 之类的事件？
回答by AlwaysALearner
Update:
更新：
ngKeypress, ngKeydownand ngKeyupare now part of AngularJS.
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)">
Read more here:
在此处阅读更多信息：
https://docs.angularjs.org/api/ng/directive/ngKeypresshttps://docs.angularjs.org/api/ng/directive/ngKeydownhttps://docs.angularjs.org/api/ng/directive/ngKeyup
https://docs.angularjs.org/api/ng/directive/ngKeypress https://docs.angularjs.org/api/ng/directive/ngKeydown https://docs.angularjs.org/api/ng/directive/注册
Earlier solutions:
较早的解决方案：
Solution 1: Use ng-changewith ng-model
解决方案 1：ng-change与ng-model
<input type="text" placeholder="+639178983214" ng-model="mobileNumber"
ng-controller="RegisterDataController" ng-change="keydown()">
JS:
JS：
function RegisterDataController($scope) {
$scope.keydown = function() {
/* validate $scope.mobileNumber here*/
};
}
Solution 2. Use $watch
解决方案 2. 使用 $watch
<input type="text" placeholder="+639178983214" ng-model="mobileNumber"
ng-controller="RegisterDataController">
JS:
JS：
$scope.$watch("mobileNumber", function(newValue, oldValue) {
/* change noticed */
});
回答by tennisgent
You were on the right track with your "ng-keydown" attribute on the input, but you missed a simple step. Just because you put the ng-keydown attribute there, doesn't mean angular knows what to do with it. That's where "directives" come into play. You used the attribute correctly, but you now need to write a directive that will tell angular what to do when it sees that attribute on an html element.
您在输入上使用“ng-keydown”属性走在正确的轨道上，但是您错过了一个简单的步骤。仅仅因为你把 ng-keydown 属性放在那里，并不意味着 angular 知道如何处理它。这就是“指令”发挥作用的地方。您正确使用了该属性，但是您现在需要编写一个指令，当它在 html 元素上看到该属性时，它会告诉 angular 应该做什么。
The following is an example of how you would do that. We'll rename the directive from ng-keydownto on-keydown(to avoid breaking the "best practice" found here):
以下是您将如何执行此操作的示例。我们将指令从ng-keydownto重命名on-keydown（以避免破坏此处找到的“最佳实践” ）：
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);
});
}
};
});
The directive simple tells angular that when it sees an HTML attribute called "ng-keydown", it should listen to the element that has that attribute and call whatever function is passed to it. In the html you would have the following:
指令 simple 告诉 angular，当它看到一个名为“ng-keydown”的 HTML 属性时，它应该侦听具有该属性的元素并调用传递给它的任何函数。在 html 中，您将拥有以下内容：
<input type="text" on-keydown="onKeydown">
And then in your controller (just like you already had), you would add a function to your controller's scope that is called "onKeydown", like so:
然后在您的控制器中（就像您已经拥有的那样），您将向控制器的范围添加一个名为“onKeydown”的函数，如下所示：
$scope.onKeydown = function(keycode){
// do something with the keycode
}
Hopefully that helps either you or someone else who wants to know
希望这对您或其他想知道的人有所帮助
回答by Prateek
JavaScript code using ng-controller:
使用 ng-controller 的 JavaScript 代码：
$scope.checkkey = function (event) {
alert(event.keyCode); //this will show the ASCII value of the key pressed
}
}
In HTML:
在 HTML 中：
<input type="text" ng-keypress="checkkey($event)" />
You can now place your checks and other conditions using the keyCode method.
您现在可以使用 keyCode 方法放置检查和其他条件。
回答by JQuery Guru
You can checkout Angular UI @ http://angular-ui.github.io/ui-utils/which provide details event handle callback function for detecting keydown,keyup,keypress (also Enter key, backspace key, alter key ,control key)
您可以查看 Angular UI @ http://angular-ui.github.io/ui-utils/，它提供了详细的事件处理回调函数，用于检测 keydown、keyup、keypress（还有 Enter 键、退格键、alter 键、控制键）
<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>
