Question

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

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

由于

Answer 1

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

Answer 2

其他用户已经写过[按钮类型=＆＃34;提交＆＃34;]会导致此问题。请注意：没有任何类型的按钮=＆＃34; ...＆＃34;声明是＆＃34;提交＆＃34;默认情况下！因此，请确保始终使用type =＆＃34; button＆＃34;。

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失败 silentntly-ish

Answer 4

我遇到了类似的问题，最后我从表格中取出了按钮。看到我使用ng-click并且所有内容都与ng-model绑定，如果它在表单内部并不重要，那么它并不重要。

我意识到这是一种不好的做法，但它肯定会编写一个自定义指令来拦截击键。

Answer 5

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

>>> G = nx.MultiDiGraph()
>>> g3 = nx.from_dict_of_dicts(d, multigraph_input=True, create_using=G)
>>> g3.edges()
[(0, 1), (0, 1)]
>>> g3
<networkx.classes.multidigraph.MultiDiGraph at 0x1087a7190>

使用<input type="text" name="myField" ng-keypress="keyPressHandler($event)"/>的以下实现：

keyPressHandler

Answer 6

检查this：

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

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

Answer 7

我遇到过这个问题。是的，你需要从你的页面中删除所有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 8

如此简单，确实需要做任何事情。如果您使用的是角度+2

，只需将其添加到表单标记即可

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

Answer 9

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

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

或者，如果你真的想要捕捉关键事件，那么还有一些指令用于传递你可以称之为停止的事件：

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

Answer 10

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

我希望这会有所帮助。

Answer 11

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

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

Answer 12

angular.element(document).ready(function () {
    angular.element(window).keydown(function () {
        if(event.keyCode == 13) {
                  event.preventDefault();
                  return false;
        }
    });
});

在angularjs控制器中试试这个

Answer 13

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

Answer 14

以下应该可以工作。。。即，仅在单击按钮时提交表单，而不是在“输入”框中单击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() { }

}

Answer 15

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

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

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

请参阅jsfiddle

阻止输入密钥表单提交

15 个答案: