使用 AngularJS 按 Enter 提交表单

小编典典

使用 AngularJS 按 Enter 提交表单

all

在这种特殊情况下，当我按 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');
    };
}])

阅读 105

2022-03-28

共1个答案

小编典典

Angular
开箱即用地支持这一点。您是否在表单元素上尝试过ngSubmit？

<form ng-submit="myFunc()" ng-controller="mycontroller">
   <input type="text" ng-model="name" />
    <br />
    <input type="text" ng-model="email" />
</form>

编辑：根据有关提交按钮的评论，请参阅通过按 Enter提交表单而不使用提交按钮，该按钮提供了以下解决方案：

<input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/>

如果您不喜欢隐藏提交按钮的解决方案，则需要将控制器功能绑定到 Enter 按键或 keyup 事件。这通常需要一个自定义指令，但 AngularUI
库已经设置了一个很好的按键解决方案。见 http://angular-ui.github.com/

添加 angularUI 库后，您的代码将类似于：

<form ui-keypress="{13:'myFunc($event)'}">
  ... input fields ...
</form>

或者您可以将回车键绑定到每个单独的字段。

另外，请参阅此 SO 问题以创建简单的 keypres 指令：如何在 AngularJS 中检测
onKeyUp？

编辑（2014-08-28）：在编写此答案时，ng-keypress/ng-keyup/ng-keydown 在 AngularJS
中不作为本机指令存在。在下面的评论中@darlan-alves 有一个很好的解决方案：

<input ng-keyup="$event.keyCode == 13 && myFunc()"... />

2022-03-28