我想捕捉下面文本框上的回车键事件。为了更清楚地说明这一点，我使用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
}
当前回答
这个呢?：
<form ng-submit="chat.sendMessage()">
<input type="text" />
<button type="submit">
</form>
现在，当你在输入后按回车键时，表单知道如何处理它。
其他回答
我最简单的方法是使用angular内置指令:
ngk, ngk或ngke是的。
通常，我们希望为已经由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>
空格或输入键:
<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，你可以使用$ eventt。请输入受支持的浏览器。 详见https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key
(function(angular) {
'use strict';
angular.module('dragModule', [])
.directive('myDraggable', ['$document', function($document) {
return {
link: function(scope, element, attr) {
element.bind("keydown keypress", function (event) {
console.log('keydown keypress', event.which);
if(event.which === 13) {
event.preventDefault();
}
});
}
};
}]);
})(window.angular);
这是我的指示:
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 />
你需要添加一个指令，像这样:
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>
这是我在开发一个有类似需求的应用程序时得出的结论， 它不需要写一个指令，它是相对简单的告诉它做什么:
<input type="text" ng-keypress="($event.charCode==13)?myFunction():return" placeholder="Will Submit on Enter">
