AngularJS阻止在Enter键上打开模态

时间:2014-04-21 09:16:14

标签: javascript angularjs binding

模态窗口有一个问题。

我有一个部分和一个部分(隐藏)我有按钮,ng-click ='function()'。

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

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

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

由于

3 个答案:

答案 0 :(得分:2)

引用 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元素等来解决问题。

答案 1 :(得分:0)

在openMobileUpdateModal()函数中

放置if条件以检测键事件。 如果按下的键值为13(输入键),则从函数返回,继续执行该功能。

答案 2 :(得分:0)

请在模型对话框按钮中添加按钮类型

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

在表单中,如果我们有任何按钮,请在输入字段上单击并触发按钮的click事件。 因此,请始终向表单中除提交按钮之外的所有按钮添加 type =“ button”

<form>

 Name  <input type="text"/>

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

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