用AngularJS按Enter键提交表单

Angular提供了开箱即用的支持。你有没有在你的表单元素上尝试过ngSubmit ?

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

编辑:根据关于提交按钮的注释，请参阅在没有提交按钮的情况下按回车键提交表单，它给出了以下解决方案:

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

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

添加angularUI库后，你的代码会像这样:

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

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

编辑(2014-08-28):在写这个答案的时候，ng-keypress/ng-keyup/ng-keydown还不存在于AngularJS中。在下面的评论中@darlan-alves有一个很好的解决方案:

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

如果你想调用函数没有形式，你可以使用我的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();
}
});
};
});

超文本标记语言:

<div ng-app="" ng-controller="MainCtrl">
<input type="text" ng-enter="doSomething()">
</div>

我在我的推特和我的依据帐户上提交了其他很棒的指令。

如果只有一个输入，则可以使用form标记。

<form ng-submit="myFunc()" ...>

如果你有多个输入，或者不想使用form标签，或者想将输入键功能附加到一个特定的字段，你可以将它内联到一个特定的输入，如下所示:

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

我想要一些比给出的答案更可扩展/语义的东西，所以我写了一个指令，以类似于内置ngClass的方式接受javascript对象:

超文本标记语言

<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]);
});
}
});
};
}]);

使用CSS类而不是重复内联样式会稍微整洁一些。

CSS

input[type=submit] {
position: absolute;
left: -9999px;
}

超文本标记语言

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

使用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。如果同时使用一个表单标签，则必须包含一个提交按钮。

非常好，干净和简单的指令与shift +进入支持:

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);
}
}
});
}
}
});

如果你也想要数据验证

<!-- 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，它将在执行函数之前验证表单。您必须为验证添加其他属性，这超出了这个问题的范围。

祝你好运。

只是想指出，在有一个隐藏提交按钮的情况下，你可以使用ngShow指令并将其设置为false，如下所示:

超文本标记语言

<form ng-submit="myFunc()">
<input type="text" name="username">
<input type="submit" value="submit" ng-show="false">
</form>

另一个方法是使用ng-keypress，

<input type="text" ng-model="data" ng-keypress="($event.charCode==13)? myfunc() : return">

用AngularJS - jsfiddle . 按Enter键提交输入

这是一个我用于基本确认/警报引导模式的指令，不需要<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);
});
}
};
});

您可以简单地将@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+版本