61

如何防止输入键以角度提交表单？

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

谢谢

4

15 回答 15

111

既然你有 ng-click 反正你也可以使用<button type="button">, 甚至在表单标签内。按钮元素的默认行为是type="submit"，这是您想要阻止的。所以，根本不需要javascript！

于 2014-04-25T13:16:07.527 回答
25

其他用户已经写过 [button type="submit"] 会导致这个问题。请注意：没有任何 type="..." 声明的按钮默认为“提交”！因此，请确保您始终使用 type="button"。

于 2016-01-28T10:02:44.950 回答
12

几个小时后，这个奇怪的代码是唯一有效的东西。

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

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 好一点，现在输入键会静默失败

于 2013-10-24T00:16:09.323 回答
12

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

<form (keydown.enter)="$event.preventDefault()" ...>
于 2017-12-29T14:22:05.507 回答
11

如果您试图阻止仅在单个元素上提交表单，则可以添加以下 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
    }
}
于 2017-08-18T19:14:54.870 回答
8

我遇到了类似的问题，我最终将按钮从表单中取出。看到我使用ng-click并且所有内容都与ng-model它绑定并不重要，它是否在表单内。

我意识到这是不好的做法，但它肯定比编写自定义指令来拦截击键要好得多。

于 2014-03-19T13:05:44.643 回答
6

检查这个：

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

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

于 2014-04-29T02:15:07.997 回答
5

我遇到了这个问题。是的，您需要从页面中删除所有 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 提交，我认为这对 UX 和可访问性更好。

于 2016-09-15T11:38:50.447 回答
2

我发现最简单的解决方案是使用输入类型作为按钮而不是提交并将表单提交功能与 ng-click 绑定，而不是在表单标签中使用 ng-submit。

我希望这有帮助。

于 2014-11-21T12:25:04.190 回答
2

这是我没有任何指令的奇怪但快速简单的解决方案。

HTML：

  <form ng-submit='submitForm()'>
    <input type='text'>
    <button type='submit' ng-mousedown='doSubmit=true'>submit</button>
  </form>

控制器：

  $scope.submitForm = function() {
    if (!$scope.doSubmit) {
        return;
    }
    $scope.doSubmit = false;
    console.log('execute some actions');
  }
于 2017-02-07T23:24:33.813 回答
1

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

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

或者，如果你真的想捕捉关键事件，还有一些指令可以传递一个你可以调用 stop 的事件：

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

于 2013-10-23T18:53:31.273 回答
1 
angular.element(document).ready(function () {
    angular.element(window).keydown(function () {
        if(event.keyCode == 13) {
                  event.preventDefault();
                  return false;
        }
    });
});

在 angularjs 控制器中尝试这个

于 2017-10-16T11:14:49.253 回答
0

以下应该工作。. . 即，表单仅在单击按钮时提交，而不是在点击Enter输入框时提交。（这绝对适用于反应形式。我没有为模板形式测试它）。

<form #form [formGroup]="form" METHOD="GET" action="http://localhost:3000/test">
  <input placeholder="Enter"/>
  <input placeholder="The Dragon"/>
  <button type="button" (click)="form.submit()">Submit</button>
</form>

当然，请记住所有的导入和声明：

app.module.ts

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
. . .
    FormsModule,
    ReactiveFormsModule

  ]
. . . 
})
export class AppModule { }

test.component.ts

import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss']
})
export class TestComponent {
  form: FormGroup = new FormGroup({});
  constructor() { }

}
于 2019-10-06T04:56:47.963 回答
0

当表单中的控件具有焦点时单击 enter 键时提交表单。如果您使用 ng-submit 注册一个监听器，您可以拦截它并使用 prevent defaults 来停止默认进程（即提交表单）。看看

于 2015-11-01T14:59:00.673 回答
-1

单击提交按钮时尝试设置一个变量，并检查它是否已在表单提交中设置。

$scope.click = function () {
    $scope.clicked = true;
    $scope.submit();
};

$scope.submit = function () {
    if ($scope.clicked) {
        ... submit
    } else {
        ... prevent defaults
    }
     $scope.clicked = false;
};

见jsfiddle

于 2013-10-27T22:35:57.873 回答