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

我想赶上下面的文本框中的input按键事件。 为了更清楚地说明我正在使用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 } 

17 Solutions collect form web for “如何在AngularJS中使用按键事件?”

你需要添加一个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> 

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

然后在你的控制器中可以有:

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

我最简单的方法只使用angular度内置指令:

ng-keypressng-keydownng-keyup

通常,我们要为已经通过ng-click处理的东西添加键盘支持。

例如:

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

现在,我们添加键盘支持。

通过回车键触发:

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

按空格键:

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

通过空格键或input键:

 <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

另一个简单的select

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

而ng-ui的select:

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

以下是我在构build具有类似需求的应用程序时所了解的内容,不需要编写指令,并且可以相对简单地说明它的作用:

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

你可以使用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 :) } } 

 ng-keypress="console.log($event)" ng-keypress="alert(123)" 

对我没有任何帮助。

Strangley在https://docs.angularjs.org/api/ng/directive/ngKeypress,ng-keypress =“count = count + 1”的示例中起作用。

我find了一个替代解决scheme,它按Enter键调用button的单击。

 <input ng-model="..." onkeypress="if (event.which==13) document.getElementById('button').click()"/> <button id="button" ng-click="doSomething()">Done</button> 

HTML

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

controller.js

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

您也可以将其应用于父元素上的控制器。 这个例子可以用来按上/下箭头键来突出显示表格中的一行。

 app.controller('tableCtrl', [ '$scope', '$element', function($scope, $element) { $scope.index = 0; // row index $scope.data = []; // array of items $scope.keypress = function(offset) { console.log('keypress', offset); var i = $scope.index + offset; if (i < 0) { i = $scope.data.length - 1; } if (i >= $scope.data.length) { i = 0; } }; $element.bind("keydown keypress", function (event) { console.log('keypress', event, event.which); if(event.which === 38) { // up $scope.keypress(-1); } else if (event.which === 40) { // down $scope.keypress(1); } else { return; } event.preventDefault(); }); }]); <table class="table table-striped" ng-controller="tableCtrl"> <thead> <tr> <th ng-repeat="(key, value) in data[0]">{{key}}</th> </tr> </thead> <tbody> <tr ng-repeat="row in data track by $index" ng-click="draw($index)" ng-class="$index == index ? 'info' : ''"> <td ng-repeat="(key, value) in row">{{value}}</td> </tr> </tbody> </table> 

这是EpokK答案的延伸。

我有同样的问题,当在input字段上input时,必须调用范围函数。 不过,我也想将input字段传递给指定的函数。 这是我的解决scheme:

 app.directive('ltaEnter', function () { return function (scope, element, attrs) { element.bind("keydown keypress", function (event) { if(event.which === 13) { // Create closure with proper command var fn = function(command) { var cmd = command; return function() { scope.$eval(cmd); }; }(attrs.ltaEnter.replace('()', '("'+ event.target.value +'")' )); // Apply function scope.$apply(fn); event.preventDefault(); } }); }; 

});

在HTML中使用如下:

 <input type="text" name="itemname" lta-enter="add()" placeholder="Add item"/> 

荣誉EpokK的答案。

那这个呢?:

 <form ng-submit="chat.sendMessage()"> <input type="text" /> <button type="submit"> </form> 

现在,当您在input内容中写入某个东西后,按下回车键,表格就会知道如何处理它。

我为我的项目做了一些代码示例。 基本上你添加标签到你的实体。 假设您已经input了文本,在input标签名称时,您可以通过预加载标签的下拉菜单进行select,您可以使用箭头进行导航,并使用Enter键进行select:

HTML + AngularJS v1.2.0-rc.3

  <div> <form ng-submit="addTag(newTag)"> <input id="newTag" ng-model="newTag" type="text" class="form-control" placeholder="Enter new tag" style="padding-left: 10px; width: 700px; height: 33px; margin-top: 10px; margin-bottom: 3px;" autofocus data-toggle="dropdown" ng-change="preloadTags()" ng-keydown="navigateTags($event)"> <div ng-show="preloadedTags.length > 0"> <nav class="dropdown"> <div class="dropdown-menu preloadedTagPanel"> <div ng-repeat="preloadedTag in preloadedTags" class="preloadedTagItemPanel" ng-class="preloadedTag.activeTag ? 'preloadedTagItemPanelActive' : '' " ng-click="selectTag(preloadedTag)" tabindex="{{ $index }}"> <a class="preloadedTagItem" ng-class="preloadedTag.activeTag ? 'preloadedTagItemActive' : '' " ng-click="selectTag(preloadedTag)">{{ preloadedTag.label }}</a> </div> </div> </nav> </div> </form> </div> 

Controller.js

 $scope.preloadTags = function () { var newTag = $scope.newTag; if (newTag && newTag.trim()) { newTag = newTag.trim().toLowerCase(); $http( { method: 'GET', url: 'api/tag/gettags', dataType: 'json', contentType: 'application/json', mimeType: 'application/json', params: {'term': newTag} } ) .success(function (result) { $scope.preloadedTags = result; $scope.preloadedTagsIndex = -1; } ) .error(function (data, status, headers, config) { } ); } else { $scope.preloadedTags = {}; $scope.preloadedTagsIndex = -1; } }; function checkIndex(index) { if (index > $scope.preloadedTags.length - 1) { return 0; } if (index < 0) { return $scope.preloadedTags.length - 1; } return index; } function removeAllActiveTags() { for (var x = 0; x < $scope.preloadedTags.length; x++) { if ($scope.preloadedTags[x].activeTag) { $scope.preloadedTags[x].activeTag = false; } } } $scope.navigateTags = function ($event) { if (!$scope.newTag || $scope.preloadedTags.length == 0) { return; } if ($event.keyCode == 40) { // down removeAllActiveTags(); $scope.preloadedTagsIndex = checkIndex($scope.preloadedTagsIndex + 1); $scope.preloadedTags[$scope.preloadedTagsIndex].activeTag = true; } else if ($event.keyCode == 38) { // up removeAllActiveTags(); $scope.preloadedTagsIndex = checkIndex($scope.preloadedTagsIndex - 1); $scope.preloadedTags[$scope.preloadedTagsIndex].activeTag = true; } else if ($event.keyCode == 13) { // enter removeAllActiveTags(); $scope.selectTag($scope.preloadedTags[$scope.preloadedTagsIndex]); } }; $scope.selectTag = function (preloadedTag) { $scope.addTag(preloadedTag.label); }; 

CSS + Bootstrap v2.3.2

 .preloadedTagPanel { background-color: #FFFFFF; display: block; min-width: 250px; max-width: 700px; border: 1px solid #666666; padding-top: 0; border-radius: 0; } .preloadedTagItemPanel { background-color: #FFFFFF; border-bottom: 1px solid #666666; cursor: pointer; } .preloadedTagItemPanel:hover { background-color: #666666; } .preloadedTagItemPanelActive { background-color: #666666; } .preloadedTagItem { display: inline-block; text-decoration: none; margin-left: 5px; margin-right: 5px; padding-top: 5px; padding-bottom: 5px; padding-left: 20px; padding-right: 10px; color: #666666 !important; font-size: 11px; } .preloadedTagItem:hover { background-color: #666666; } .preloadedTagItemActive { background-color: #666666; color: #FFFFFF !important; } .dropdown .preloadedTagItemPanel:last-child { border-bottom: 0; } 

我有点晚了..但我发现了一个更简单的解决scheme,使用auto-focus ..这可能是有用的button或其他popupdialog

<button auto-focus ng-click="func()">ok</button>

这应该没问题,如果你想按下空格或input点击button。

这是我的指令:

 mainApp.directive('number', function () { return { link: function (scope, el, attr) { el.bind("keydown keypress", function (event) { //ignore all characters that are not numbers, except backspace, delete, left arrow and right arrow if ((event.keyCode < 48 || event.keyCode > 57) && event.keyCode != 8 && event.keyCode != 46 && event.keyCode != 37 && event.keyCode != 39) { event.preventDefault(); } }); } }; }); 

用法:

 <input number /> 

你可以使用ng-keydown,ng-keyup,ng-press等。

激发一个function:

  <input type="text" ng-keypress="function()"/> 

或者如果你有一个condion,比如他按下escape(27是逃跑的关键代码)

  <form ng-keydown=" event.which=== 27?cancelSplit():0"> .... </form> 

我认为使用document.bind更优雅一些

 constructor($scope, $document) { var that = this; $document.bind("keydown", function(event) { $scope.$apply(function(){ that.handleKeyDown(event); }); }); } 

要获取文档到控制器构造函数:

 controller: ['$scope', '$document', MyCtrl] 
 <!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="myCtrl"> Informe your name:<input type="text" ng-model="pergunta" ng-keypress="pressionou_enter($event)" ></input> <button ng-click="chamar()">submit</button> <h1>{{resposta}}</h1> </div> <script> var app = angular.module('myApp', []); //create a service mitsuplik app.service('mitsuplik', function() { this.myFunc = function (parametro) { var tmp = ""; for (var x=0;x<parametro.length;x++) { tmp = parametro.substring(x,x+1) + tmp; } return tmp; } }); //Calling our service app.controller('myCtrl', function($scope, mitsuplik) { $scope.chamar = function() { $scope.resposta = mitsuplik.myFunc($scope.pergunta); }; //if mitsuplik press [ENTER], execute too $scope.pressionou_enter = function(keyEvent) { if (keyEvent.which === 13) { $scope.chamar(); } } }); </script> </body> </html> 
  • 在自定义指令的作用域绑定中使用符号'@','&','='和'>':AngularJS
  • 绑定variables从服务/工厂到控制器
  • 在AngularJS中dynamic添加指令
  • 指令attr内的callback函数在不同的attr中定义
  • 自定义子指令访问父级的范围
  • jQuery find()方法在AngularJS指令中不起作用
  • AngularJS:ngInclude vs指令
  • 在AngularJS指令中查找子元素
  • 自定义表单validation指令来比较两个字段
  • 如何正确使用ng-cloak指令?
  • AngularJS集团指令没有外部依赖