按Enter键inputAngularJS提交表单
在这种特殊情况下，当我按Enter键时，有什么选项可以使这些input调用一个函数？
// HTML view // <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'); }; }]) Angular支持这个开箱即用。 你有没有尝试过ngSubmit你的表单元素？
<form ng-submit="myFunc()" ng-controller="mycontroller"> <input type="text" ng-model="name" /> <br /> <input type="text" ng-model="email" /> </form>
编辑：根据有关提交button的评论，请参阅提交表单，按enter不提交button ，提供的解决scheme：
<input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/>
如果您不喜欢隐藏的提交button解决scheme，则需要将控制器function绑定到Enter键或键盘事件。 这通常需要一个自定义指令，但AngularUI库已经build立了一个很好的按键解决scheme。 见http://angular-ui.github.com/
在添加了angularUI库之后，你的代码会是这样的：
<form ui-keypress="{13:'myFunc($event)'}"> ... input fields ... </form>
或者您可以将input按键绑定到每个单独的字段。
另外，请参阅以下有关创build简单的keypres指令的问题： 如何在AngularJS中检测onKeyUp？
编辑（2014-08-28）：在写这个答案的时候，ng-keypress / ng-keyup / ng-keydown在AngularJS中并不存在。 在下面的评论@达兰阿尔维斯有一个相当不错的解决scheme：
<input ng-keyup="$event.keyCode == 13 && myFunc()"... />
如果你想调用没有forms的函数，你可以使用我的ngEnter指令：
Javascript ：
angular.module('yourModuleName').directive('ngEnter', function() { return function(scope, element, attrs) { element.bind("keydown keypress", function(event) { if(event.which === 13) { scope.$apply(function(){ scope.$eval(attrs.ngEnter, {'event': event}); }); event.preventDefault(); } }); }; });
HTML ：
<div ng-app="" ng-controller="MainCtrl"> <input type="text" ng-enter="doSomething()"> </div>
我在我的twitter和我的要求提交其他真棒指令。
如果你只有一个input，你可以使用表单标签。
<form ng-submit="myFunc()" ...>
如果您有多个input，或者不想使用表单标签，或者想要将input键function附加到特定字段，则可以将其内联到特定input，如下所示：
<input ng-keyup="$event.keyCode == 13 && myFunc()" ...>
我想要的东西比给定的答案更可扩展/语义，所以我写了一个指令，以类似于内置的ngClass方式获取JavaScript对象：
HTML
<input key-bind="{ enter: 'go()', esc: 'clear()' }" type="text"></input>
对象的值在指令作用域的上下文中进行评估 – 确保它们被封装在单引号中，否则所有的函数都会在加载指令（！）时执行
所以例如： esc : 'clear()'而不是esc : clear()
使用Javascript
myModule .constant('keyCodes', { esc: 27, space: 32, enter: 13, tab: 9, backspace: 8, shift: 16, ctrl: 17, alt: 18, capslock: 20, numlock: 144 }) .directive('keyBind', ['keyCodes', function (keyCodes) { function map(obj) { var mapped = {}; for (var key in obj) { var action = obj[key]; if (keyCodes.hasOwnProperty(key)) { mapped[keyCodes[key]] = action; } } return mapped; } return function (scope, element, attrs) { var bindings = map(scope.$eval(attrs.keyBind)); element.bind("keydown keypress", function (event) { if (bindings.hasOwnProperty(event.which)) { scope.$apply(function() { scope.$eval(bindings[event.which]); }); } }); }; }]);
非常好，干净，简单的指令与Shift +input支持：
app.directive('enterSubmit', function () { return { restrict: 'A', link: function (scope, elem, attrs) { elem.bind('keydown', function(event) { var code = event.keyCode || event.which; if (code === 13) { if (!event.shiftKey) { event.preventDefault(); scope.$apply(attrs.enterSubmit); } } }); } } });
另一种方法是使用ng-keypress，
<input type="text" ng-model="data" ng-keypress="($event.charCode==13)? myfunc() : return">
按下AngularJS的input提交input – jsfiddle
如果你想要数据validation
<!-- 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 ，它将在执行函数之前validation表单。 您将不得不添加其他属性进行validation，这超出了这个问题的范围。
祝你好运。
只是想指出，在隐藏提交button的情况下，你可以使用ngShow指令，并将其设置为false，如下所示：
HTML
<form ng-submit="myFunc()"> <input type="text" name="username"> <input type="submit" value="submit" ng-show="false"> </form>
使用ng-submit并将两个input封装在单独的表单标签中：
<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>
用自己的表单标签包装每个input字段允许ENTER调用任何一种forms的提交。 如果您同时使用一个表单标签，则必须包含一个提交button。
稍微整洁的使用CSS类而不是重复内联样式。
CSS
input[type=submit] { position: absolute; left: -9999px; }
HTML
<form ng-submit="myFunc()"> <input type="text" ng-model="name" /> <br /> <input type="text" ng-model="email" /> <input type="submit" /> </form>
FWIW – 这是我用于基本确认/警报引导模式的指令，不需要<form>
（只需将jQuery点击操作转换为任何你喜欢的，并添加data-easy-dismiss到你的模式标签）
app.directive('easyDismiss', function() { return { restrict: 'A', link: function ($scope, $element) { var clickSubmit = function (e) { if (e.which == 13) { $element.find('[type="submit"]').click(); } }; $element.on('show.bs.modal', function() { $(document).on('keypress', clickSubmit); }); $element.on('hide.bs.modal', function() { $(document).off('keypress', clickSubmit); }); } }; });
