如何在AngularJS中使用按键事件？

Question

我想在下面的文本框中捕获回车键按下事件.为了更清楚,我使用a ng-repeat来填充tbody.这是HTML:

<td><input type="number" id="closeqty{{$index}}" class="pagination-right closefield" 
    data-ng-model="closeqtymodel" data-ng-change="change($index)" required placeholder="{{item.closeMeasure}}" /></td>

这是我的模块:

angular.module('components', ['ngResource']);

我正在使用资源填充表,我的控制器代码是:

function Ajaxy($scope, $resource) {
//controller which has resource to populate the table 
}

Answer 1

你需要添加一个directive,像这样:

Javascript:

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:

<div ng-app="" ng-controller="MainCtrl">
    <input type="text" my-enter="doSomething()">    
</div>

Answer 2

另一种方法是使用标准指令 ng-keypress="myFunct($event)"

然后在您的控制器中,您可以:

...

$scope.myFunct = function(keyEvent) {
  if (keyEvent.which === 13)
    alert('I am an alert');
}

...

Answer 3

我最简单的方法是使用角度内置指令:

ng-keypress,ng-keydown或ng-keyup.

通常,我们希望为已经通过ng-click处理的内容添加键盘支持.

例如:

<a ng-click="action()">action</a>

现在,让我们添加键盘支持.

按Enter键触发:

<a ng-click="action()" 
   ng-keydown="$event.keyCode === 13 && action()">action</a>

按空格键:

<a ng-click="action()" 
   ng-keydown="$event.keyCode === 32 && action()">action</a>

按空格或输入键:

<a ng-click="action()" 
   ng-keydown="($event.keyCode === 13 || $event.keyCode === 32) && action()">action</a>

如果你在现代浏览器

<a ng-click="action()" 
   ng-keydown="[13, 32].includes($event.keyCode) && action()">action</a>

有关keyCode的更多信息:
keyCode已被弃用但受到良好支持的API,您可以在支持的浏览器中使用$ evevt.key.
有关详细信息,请参阅https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

Answer 4

另一种简单的选择

<input ng-model="edItem" type="text" 
    ng-keypress="($event.which === 13)?foo(edItem):0"/>

和ng-ui替代方案:

<input ng-model="edItem" type="text" ui-keypress="{'enter':'foo(edItem)'}"/>

Answer 5

这是我在构建具有类似要求的应用程序时所想到的,它不需要编写指令,而且它的相关性很简单:

<input type="text" ng-keypress="($event.charCode==13)?myFunction():return" placeholder="Will Submit on Enter">

Answer 6

您可以使用ng-keydown ="myFunction($ event)"作为属性.

<input ng-keydown="myFunction($event)" type="number">

myFunction(event) {
    if(event.keyCode == 13) {   // '13' is the key code for enter
        // do what you want to do when 'enter' is pressed :)
    }
}

Answer 7

html

<textarea id="messageTxt" 
    rows="5" 
    placeholder="Escriba su mensaje" 
    ng-keypress="keyPressed($event)" 
    ng-model="smsData.mensaje">
</textarea>

控制器.js

$scope.keyPressed = function (keyEvent) {
    if (keyEvent.keyCode == 13) {
        alert('presiono enter');
        console.log('presiono enter');
    }
};