我想捕捉下面文本框上的回车键事件。为了更清楚地说明这一点，我使用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
}
当前回答
你需要添加一个指令，像这样:
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>
其他回答
这是我的指示:
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 />
这是我在开发一个有类似需求的应用程序时得出的结论， 它不需要写一个指令，它是相对简单的告诉它做什么:
<input type="text" ng-keypress="($event.charCode==13)?myFunction():return" placeholder="Will Submit on 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>
<!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>
我有点晚了。但我发现了一个更简单的解决方案，使用自动对焦。这可能是有用的按钮或其他弹出对话框:
<button auto-focus ng-click="func()按钮“> < / >
这应该是好的，如果你想按下按钮onSpace或Enter单击。
