且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

使用 AngularJS 按 Enter 提交表单

更新时间:2023-12-02 22:39:34

Angular 支持开箱即用.您是否在表单元素上尝试过 ngSubmit?

Angular supports this out of the box. Have you tried ngSubmit on your form element?

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

根据关于提交按钮的评论,请参阅 在没有提交按钮的情况下按 Enter 提交表单 给出了以下解决方案:

Per the comment regarding the submit button, see Submitting a form by pressing enter without a submit button which gives the solution of:

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

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

If you don't like the hidden submit button solution, you'll need to bind a controller function to the Enter keypress or keyup event. This normally requires a custom directive, but the AngularUI library has a nice keypress solution set up already. See http://angular-ui.github.com/

添加 angularUI 库后,您的代码将类似于:

After adding the angularUI lib, your code would be something like:

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

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

or you can bind the enter keypress to each individual field.

此外,请参阅此 SO 问题以创建简单的 keypres 指令:如何在 AngularJS 中检测 onKeyUp?

Also, see this SO questions for creating a simple keypres directive: How can I detect onKeyUp in AngularJS?

EDIT (2014-08-28):在撰写此答案时,ng-keypress/ng-keyup/ng-keydown 在 AngularJS 中作为本机指令不存在.在下面的评论中@darlan-alves 有一个很好的解决方案:

EDIT (2014-08-28): At the time this answer was written, ng-keypress/ng-keyup/ng-keydown did not exist as native directives in AngularJS. In the comments below @darlan-alves has a pretty good solution with:

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