具有单个文本输入字段的引导模式对话框始终在 Enter 键上关闭 [英] Bootstrap modal dialogs with a single text input field always dismiss on Enter key

问题描述

为什么当焦点在字段上并按下 Enter 时，这个带有一个文本字段(和 NO 按钮)的简单模式对话框会消失?

Why does this simple modal dialog with one text field (and NO buttons) dismiss when the focus is on the field and Enter is pressed?

<a href="#dlgAddDeviceFolder" class="add-device-folder" data-toggle="modal">New Folder</a>

<div id="dlgAddDeviceFolder" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="dlgAddFolderLabel" aria-hidden="true">
  <div class="modal-header">
    <!--<a type="button" class="close" data-dismiss="modal" aria-hidden="true">×</a>-->
    <h3 id="myModalLabel">Add Device Folder</h3>
  </div>

  <div class="modal-body">
    <form class="form-horizontal">
      <div class="control-group">
        <label class="control-label" for="dlgAddDeviceFolder_name">Folder Name</label>
        <div class="controls">
          <input id="dlgAddDeviceFolder_name" type="text" placeholder="Folder Name" autocomplete="off">
        </div>
      </div>
    </form>
  </div>

  <div class="modal-footer">
    <!--<a type="button" class="btn" data-dismiss="modal" aria-hidden="true">Cancel</a>-->
    <!--<a id="dlgAddDeviceFolder_btnOk" type="button" class="btn btn-primary">OK</a>-->
  </div>
</div>

这里有广泛的讨论表明这是一个按钮问题(我已将 type="button" 放在按钮和锚标签上.我已将按钮标签转换为锚).但是，我尝试了所有提出的解决方案，最后只是完全注释掉了按钮，它仍然会发生.

There is extensive discussion here that suggests it is a button issue (I have put type="button" on button and anchor tags. I have converted button tags to anchors). However, I tried all solutions proposed and then ended up just completely commenting out the buttons, and it still happens.

请注意，如果您只是复制相同的文本输入并有两个字段，问题就会消失(专注于任一文本字段不会导致 Enter 消失)

Note that if you simply duplicate the same text input and have two fields, the problem goes away (focusing on either text field will not cause dismissal on Enter)

推荐答案

感谢@mccannf 为我指明了正确的方向.这似乎是一个比 Bootstrap 特定的更普遍的表单提交问题.两种解决方案:

Thanks to @mccannf for pointing me in the right direction. This seems to be a more general form submit issue than anything specific to Bootstrap. Two solutions:

1.将表单的 onsubmit 属性设置为 onsubmit="return false;"(https://stackoverflow.com/a/1329168/569091)

我最喜欢这个解决方案，因为它似乎很难预测(并且可能取决于浏览器)哪些表单字段可能会或可能不会在输入 Enter 时触发表单提交.

I like this solution the best as it seems hard to predict (and is perhaps browser dependent) which form fields may or may not trigger a form submit on typing Enter.

所以，在我的原始问题示例中:

So, in my example from the original Question:

<form class="form-horizontal" onsubmit="return false">

<强>2.当 event.keyCode == 13 时，设置 onkeydown(或 onkeyup?)属性返回 false(https://stackoverflow.com/a/2037935/569091)在此链接中，onkeyup 有效，但我必须使用 onkeydown(取决于浏览器?)

2. Set the onkeydown (or onkeyup?) attribute to return false when event.keyCode == 13 (https://stackoverflow.com/a/2037935/569091) In this link, onkeyup worked, but I had to use onkeydown (browser dependent?)

所以，在我的原始问题示例中:

So, in my example from the original Question:

function ignoreEnter(event)
{
  if (event.keyCode == 13) {
    return false;
  }
}

// and this in the HTML
<input id="dlgAddDeviceFolder_name" type="text" placeholder="Folder Name" onkeydown="return ignoreEnter(event);">

这篇关于具有单个文本输入字段的引导模式对话框始终在 Enter 键上关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！