javascript 在 Angularjs 中使用按键调用函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33892633/
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
Call function using keypress in Angularjs
提问by Coding Learner
I have a method that gets called inside a div tag using ng-click="startChat()"- it works fine.
我有一个使用 div 标签调用的方法ng-click="startChat()"- 它工作正常。
I would like the same function to be called there when pressing down a key, let's say 'p' in this case which has a keycode of 112.
我希望在按下某个键时在那里调用相同的函数，假设在这种情况下为“p”，其键码为 112。
I tried adding the following to the div:
我尝试将以下内容添加到 div：
ng-keydown="$event.keyCode == 112 ? startChat()"
I also tried the same with ng-keyupp but nothing happens. Does someone know why and how can I achieve the task?
我也用 ng-keyupp 尝试过同样的方法，但没有任何反应。有人知道为什么以及如何完成任务吗？
回答by sillysicko
You have to treat the action of the ng-keydown as a function call to either your $scope in the controller or a function in your link section of the directive. Code below works for me.
您必须将 ng-keydown 的操作视为对控制器中的 $scope 或指令链接部分中的函数的函数调用。下面的代码对我有用。
<input type="text" ng-keydown='doSomething($event)'>
$scope.doSomething= function($event){
var key = $event.keyCode;
console.log(key)
}
回答by kipzes
You can do this with ng-keypress. Call a function on this and check for the keyCode.
你可以用ng-keypress做到这一点。对此调用一个函数并检查 keyCode。
回答by Emir Marques
Try with directive as:
尝试使用指令作为：
JS:
JS：
app.directive('myEnter', function () {
return function (scope, element, attrs) {
element.bind("keydown keypress", function (event) {
if(event.which === 13) {
scope.$apply(function (){
scope.$eval(attrs.myEnter);
});
event.preventDefault();
}
});
};
});
HTML:
HTML：
<div ng-app="" ng-controller="MainCtrl">
<input type="text" my-enter="doSomething()">
</div>
Font: How to use a keypress event in AngularJS?
Our simple keypress
我们简单的按键
Demo:
演示：
function myController($scope) {
$scope.lastKey = "---"
$scope.keypress = function($event) {
$scope.lastKey = $event.keyCode
};
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<h2>Example</h2>
<div ng-controller="myController">
<p>The new ng-keydown directive works perfectly fine as long as it is bound to an input field. Type to see keyCode: </p>
<input ng-keydown="keypress($event)">
<p>last key: {{lastKey}}</p>
<div ng-keydown="keypress($event)" style="border: 1px solid blue;">
<p>Focusing this div (blue border) and typing however does not work, in spite of the documentation saying that the context for ng-keydown can be anything: http://code.angularjs.org/1.1.3/docs/api/ng.directive:ngKeydown</p>
<p>I can't seem to get it to cooperate unless there is an input field:
<input>
</p>
<p>How can I use ng-keydown for the entire document or selected spans, etc.?
</p>
</div>
</div>
</div>