AngularJS阻止Enter键上的模式打开

AngularJS prevent modal open on Enter key

本文关键字：模式 阻止 Enter AngularJS      更新时间：2023-09-26

我有一个模态窗口的问题。

我有两个部分，在一个部分（隐藏的）中，我有一个ng-click="function（）"的按钮。

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

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

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

感谢

引用form/ngForm上的文档：

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

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

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

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

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

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

 <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>

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

相关文章：