AngularJS 阻止在 Enter 键上打开模式答案

【问题标题】：AngularJS prevent modal open on Enter keyAngularJS 阻止在 Enter 键上打开模式
【发布时间】：2014-06-05 08:02:23
【问题描述】：

我有一个模态窗口问题。

我有几个部分，在一个部分（隐藏）我有带有 ng-click='function()' 的按钮。

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

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

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

谢谢

【问题讨论】：

标签： javascript angularjs binding

【解决方案1】：

引用the docs on form/ngForm：

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

表单元素上的 ngSubmit 指令

ngClick 指令在第一个按钮或类型为 submit (input[type=submit]) 的输入字段上

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

如果表单只有一个输入字段，则在该字段中按 Enter 会触发表单提交 (ngSubmit)

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

如果表单具有一个或多个输入字段和一个或多个按钮或 input[type=submit]，则在任何输入字段中按 enter 将触发第一个按钮或 input[type=submit] 上的单击处理程序（ ngClick) 和封闭表单上的提交处理程序 (ngSubmit)

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

【讨论】：

谢谢你，你的评论帮助了我。解决了将按钮更改为 div 的问题...

【解决方案2】：

在您的 openMobileUpdateModal() 函数中放置 if 条件以检测关键事件。如果按下的键值为 13（回车键），则从函数返回，否则继续函数。

【讨论】：

【解决方案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>

【讨论】：