在这个特殊的情况下，我有什么选项，使这些输入调用函数时，我按下Enter?
Html:
<form>
<input type="text" ng-model="name" <!-- Press ENTER and call myFunc --> />
<br />
<input type="text" ng-model="email" <!-- Press ENTER and call myFunc --> />
</form>
// Controller //
.controller('mycontroller', ['$scope',function($scope) {
$scope.name = '';
$scope.email = '';
// Function to be called when pressing ENTER
$scope.myFunc = function() {
alert('Submitted');
};
}])
当前回答
我把重点放在表中输入的行下面
<input ng-keydown="$event.keyCode == 13 && onPressEnter($event)" id="input_0" type="text" >
$scope.onPressEnter = function (event) {
let inputId = event.target.id;
let splited = inputId.split('_');
let newInputId = 'input' + '_' + ((+splited[1]) + 1);
if (document.getElementById(newInputId))
document.getElementById(newInputId).focus();
// else submit form
}
其他回答
您可以简单地将@Hostlistener与组件绑定，其余的将由它负责。它不需要从HTML模板中绑定任何方法。
@HostListener('keydown',['$event'])
onkeydown(event:keyboardEvent){
if(event.key == 'Enter'){
// TODO do something here
// form.submit() OR API hit for any http method
}
}
上面的代码应该适用于Angular 1+版本
如果只有一个输入，则可以使用form标记。
<form ng-submit="myFunc()" ...>
如果你有多个输入，或者不想使用form标签，或者想将输入键功能附加到一个特定的字段，你可以将它内联到一个特定的输入，如下所示:
<input ng-keyup="$event.keyCode == 13 && myFunc()" ...>
使用ng-submit并将两个输入包装在单独的表单标签中:
<div ng-controller="mycontroller">
<form ng-submit="myFunc()">
<input type="text" ng-model="name" <!-- Press ENTER and call myFunc --> />
</form>
<br />
<form ng-submit="myFunc()">
<input type="text" ng-model="email" <!-- Press ENTER and call myFunc --> />
</form>
</div>
将每个输入字段包装在自己的表单标记中，允许ENTER在任何表单上调用submit。如果同时使用一个表单标签，则必须包含一个提交按钮。
如果你也想要数据验证
<!-- form -->
<form name="loginForm">
...
<input type="email" ng-keyup="$loginForm.$valid && $event.keyCode == 13 && signIn()" ng-model="email"... />
<input type="password" ng-keyup="$loginForm.$valid && $event.keyCode == 13 && signIn()" ng-model="password"... />
</form>
这里重要的添加是$loginForm。$valid将在执行函数之前验证表单。您必须为验证添加其他属性，这超出了这个问题的范围。
祝你好运。
另一个方法是使用ng-keypress，
<input type="text" ng-model="data" ng-keypress="($event.charCode==13)? myfunc() : return">
用AngularJS - jsfiddle按Enter键提交输入
