AngularJS绑定到输入的回车键,如果输入是按钮,则提交
angularJS bind to input's enter key and submit if input is button
>我有这样的指令,转到模态窗口中的下一个输入(或按钮):
.directive('autoVrm', function () {
return function (scope, element, attrs) {
var counter = 0;
element.bind("keydown keypress", function (event) {
console.log(element);
if(event.which === 13) {
counter++;
event.preventDefault();
var elementToFocus = element.find('input')[counter] || element.find('button')[1];
console.log(elementToFocus.type);
if(angular.isDefined(elementToFocus))
elementToFocus.focus();
if (elementToFocus.type === 'button'){
counter = -1;
elementToFocus.bind("keydown keypress", function (eventSubmit) {
if(eventSubmit.which === 13) {
console.log('submit');
}
});
}
}
});
};
但是我有一个麻烦,如果我在按钮上,然后单击输入,我得到:
Uncaught TypeError: undefined is not a function
但是为什么呢? 如何使输入点击提交表单? 不依赖控制器?
尝试 angular.element(elementToFocus).bind for the Uncatch TypeError。
关于您的新评论:
如果这是在控制器中定义的
$scope.registerUser = function() {
...
}
然后在指令中简单地调用它
elementToFocus.bind("keydown keypress", function (eventSubmit) {
if(eventSubmit.which === 13) {
scope.registerUser();
}
});
作为猜测,您可以执行诸如检查attrs参数以获取"data-ng-click"的值并调用相应的函数之类的操作:
elementToFocus.bind("keydown keypress", function (eventSubmit) {
if(eventSubmit.which === 13) {
if (attrs.dataNgClick == "registerUser()" {
scope.registerUser();
}
else if (attrs.dataNgClick == "sign()" {
scope.sign();
}
else if (attrs.dataNgClick == "frgtPassword()" {
scope.frgtPassword();
}
}
});
这种行为已经在 Web 技术中定义过。当您在表单内按 Enter 时,表单将提交。为此,您需要处理正确的事件(ng-submit)。您可以使用更少的代码实现所需的效果。
angular.module('app', [])
.controller('MyCtrl', function () {
var self = this;
self.message = "press ENTER to submit";
self.count = 0;
this.onSubmit = function () {
self.count++;
self.message = "form submitted " + self.count + " times";
};
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js@*" data-semver="1.4.0-beta.1" src="https://code.angularjs.org/1.4.0-beta.1/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MyCtrl as ctrl">
<h1>Hello Stack Overflow!</h1>
<form ng-submit="ctrl.onSubmit()">
<input type="text" placeholder="press ENTER"/>
<input type="text" placeholder="press ENTER"/>
<input type="submit" value="Send" />
</form>
<div>{{ctrl.message}}</div>
</body>
</html>
相关文章:
- 如果我在javascript中输入无效的电子邮件或空白,如何显示特定的文本框边框红色
- 如果值为空,如何设置输入的默认值?jQuery
- 边框颜色是't如果输入为空,则更改
- 我确实有一个表单,如果用户输入了输入,它应该检查否定或空的输入框,并抛出一条警告消息
- 如果用户输入的长度小于最小长度,则显示错误消息
- jQuery从输入中获取值并检查它是否'It’是的.如果是这样,它应该公布有多少是正确的
- 如果图像标记是用javascript编写的,并且需要用户输入,那么图像不会随页面加载吗
- 用户名输入如果其他块不能正常工作/Javascript-jQuery-AJAX
- jQuery表单验证(如果==“执行此操作”)仅适用于第一次输入
- 如果没有任何输入,如何启用按钮
- 如果通过Javascript更改了输入,则jQuery会触发事件
- 如果不兼容,则隐藏范围输入
- 试图清理一个电话号码,以便如果它像816-345-6757一样被输入,它会像8163456757一样返回它
- AngularJS阻止提交如果输入没有't已验证
- 如果键入文本,请更改输入边框颜色
- 值首先发布,然后只有它完成输入(如果单击).向后需要(代码是corect)
- 检查表单字段的输入 - 如果存在邮政编码,则提醒 javascript
- 验证 HTML 表单输入 - 如果选项卡无效,则阻止选项卡
- 单击另一个文本框时清除文本输入(如果它是空的)-jQuery
- 邮件类型输入:如果邮件错误或正确,动态改变按钮的颜色/文本