阻止输入密钥表单提交

Question

如何防止回车键以角度提交表单？

有没有办法捕获13键并禁用它或将表单设置为无效,除非从ID为x的按钮提交？

谢谢

Answer 1

由于您仍然可以进行ng-click,因此<button type="button">即使在表单标记内也可以使用.button元素的默认行为type="submit"是您要阻止的行为.所以,根本不需要javascript!

Answer 2

其他用户已经写过[button type ="submit"]会导致这个麻烦.请注意:没有任何type ="..."声明的按钮默认为"提交"!因此,请确保始终使用type ="button".

Answer 3

几个小时后,这个奇怪的代码是唯一有效的.

我在等待更好的答案,不会接受这个怪物:

app.directive('onKeyup', function() {
    return function(scope, elm, attrs) {
      var allowedKeys = scope.$eval(attrs.keys);
      elm.bind('keydown', function(evt) {           
        angular.forEach(allowedKeys, function(key) {
          if (key == evt.which) {
             evt.preventDefault(); // Doesn't work at all
             window.stop(); // Works in all browsers but IE    
             document.execCommand("Stop"); // Works in IE
             return false; // Don't even know why it's here. Does nothing.                     
          }
        });
      });
    };
});

并在所有表单输入上使用它来触发它:

<input on-keyup="bla" keys="[13]" .... />

现在,只要用户按下回车键,窗口就会尝试提交,然后不能这样做,而不是那么默默.丑陋但有效.

编辑:keydown比元素绑定的keyup好一点,现在输入key failntly-ish

Answer 4

如果您试图阻止仅在单个元素上提交表单,则可以添加以下ng-keypress处理程序(这适用于Angular 1.x):

<input type="text" name="myField" ng-keypress="keyPressHandler($event)"/>

通过以下实现keyPressHandler:

$scope.keyPressHandler = function(e) {
    if (e.keyCode === 13) {
        e.preventDefault();
        e.stopPropagation();

        // Perform your custom logic here if any
    }
}

Answer 5

如此简单，不需要做任何事情。只需将其添加到表单标签（如果您使用的是角度+2）

<form (keydown.enter)="$event.preventDefault()" ...>

Answer 6

我有一个类似的问题,我最终取出了表格中的按钮.看到我使用它,ng-click并且所有内容都与ng-model它绑定并不重要,如果它在表单内部或不是.

我意识到这是不好的做法,但它确实打算写一个自定义指令来拦截键击.

Answer 7

检查一下:

如果表单有2个以上的输入字段且没有按钮或输入[type = submit],则按Enter键不会触发提交

因此,如果您的表单有2个以上的输入字段,您可以使用类似的方法<span ng-click="submit()">Sumbit</span>来防止在这些输入字段中输入键的键触发.

Answer 8

我遇到过这个问题.是的,你需要从你的页面中删除所有type ='submit',并确保任何其他按钮都有type ="button"但是然后挑战仍然可以使用正常的验证提交.

我创建了一个指令,触发表单提交+表单状态以进行验证.更换:

<button type="submit">

同

<button submit-button type="button">

指示:

export default /*@ngInject*/ function submitButton($log) {
return ({
    require: '^form',
    link: link,
    restrict: 'A'
});

function link(scope, element, attributes, formCtrl) {

    element.on('click', clickHandler);

    function clickHandler() {
        formCtrl.$setDirty(true);
        formCtrl.$setSubmitted(true);
        angular.element(element[0].form).triggerHandler('submit');
        $log.info('Form Submitted');
    }

}

当你专注于你的提交按钮时,你仍然可以点击ENTER提交,我认为更好的用户体验和辅助功能.

Answer 9

您可以使用表单标签上的 ng-submit 捕获控制器中的默认表单提交，它将阻止提交：

http://docs.angularjs.org/api/ng.directive:ngSubmit

或者，如果您确实想捕获关键事件，还有一些指令可以传递您可以调用 stop 的事件：

http://docs.angularjs.org/api/ng.directive:ngKeyup