AngularJS阻止在Enter键上打开模态

Question

模态窗口有一个问题。

我有几个部分和一个部分（隐藏）我有按钮与ng-click ='function（）'。

<section class='hidden'>
  <button class="mobileUpdate" ng-click="openMobileUpdateModal()">SMS</button>
</section>

openMobileUpdateModal（）打开模式对话框。问题是，当我在表单中的任何输入字段上按Enter键时，它会打开我的模态窗口。

知道如何防止这种情况吗？

谢谢

Answer 1

引用the docs on form/ngForm：

您可以使用以下两种方法之一来指定在提交表单时应调用的javascript方法：

• 表单元素上的ngSubmit指令
• 在提交类型的第一个按钮或输入字段上的ngClick指令（input [type = submit]）

[...] ... HTML规范中的以下表单提交规则：

• 如果表单只有一个输入字段，则点击此字段中的输入触发表单提交（ngSubmit）
• 如果表单有2个以上的输入字段且没有按钮或输入[type = submit]，则按Enter键不会触发提交
• 如果表单有一个或多个输入字段和一个或多个按钮或输入[type = submit]，则在任何输入字段中输入enter将触发第一个按钮上的click处理程序或输入[type = submit]（ngClick）和封闭表单上的提交处理程序（ngSubmit）

因此，根据您的其他设置，您可以通过更改按钮的顺序，通过检测和过滤键事件，通过引入额外的form元素等来解决问题。

Answer 2

在openMobileUpdateModal（）函数中放置if条件以检测键事件。如果按下的键值为13（输入键），则从函数返回，继续执行该功能。

Answer 3

请将按钮类型添加到模态对话框按钮。

 <section class='hidden'>
  <button class="mobileUpdate" type="button" ng-click="openMobileUpdateModal()">SMS</button>
</section>

在表单中，如果我们有任何按钮输入，单击输入字段将触发按钮的单击事件。因此，总是将type =“button”添加到除提交按钮以外的表单中的所有按钮

<form>

 Name  <input type="text"/>

 <button type="button">open model</button>

 <button type="submit">Submit Form </button>
</form>