10

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

<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" 放在按钮和锚标签上。我已将按钮标签转换为锚）。但是，我尝试了所有提出的解决方案，最后只是完全注释掉了按钮，它仍然会发生。

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

4

3 回答 3

14

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

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

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

因此，在我的原始问题示例中：

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

2.设置onkeydown（或onkeyup？）属性返回false时event.keyCode == 13 （https://stackoverflow.com/a/2037935/569091）在这个链接，onkeyup工作，但我不得不使用onkeydown（取决于浏览器？）

因此，在我的原始问题示例中：

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);">
于 2013-03-06T18:56:46.847 回答
6

只是为了澄清之前的答案并回应raykin评论。

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

当您以javascript控制表单的提交为例时，此解决方案很有帮助

<div class="modal hide fade" tabindex="-1">
 <div class="modal-header">
      <button class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">{% trans "Create" %}</h3>
  </div>
  <div class="modal-body">
       <form method="POST" class="form-horizontal" onsubmit="return false">
           <input id="id_name" maxlength="250" name="name" type="text">
       </form>
  </div>
  <div class="modal-footer">
    <button id="save-button" class="btn">{% trans "Save" %}</button>
    <button class="btn" aria-hidden="true">{% trans "Cancel" %}</button>
  </div>
</div>

<script>
    $('#save-button').on('click', function(){
        // TODO add ajax call
    });
</script>

如您所见，提交表单是通过按钮保存 id 的 jquery 调用 onclick。

但是如果你想给表单标签添加动作，那么你可能不得不使用第二种解决方案

2.设置onkeydown（或onkeyup？）属性在event.keyCode == 13时返回false（https://stackoverflow.com/a/2037935/569091）

在我看来，如果你想动态地构建表单，我不喜欢这个解决方案。

于 2013-12-18T09:40:22.077 回答
6

只是对 Mara Jimenez 帖子的评论：

还有另一种使用动作标签的方法，而不是玩弄事件。您可以在表单中添加虚拟隐形输入，Enter 键不会提交。这是示例：

<form role="form" method="post" action="submitform.php">
    <input type="text" id="name" name="name" >
    <input type="text" style="display: none;">
</form>
于 2014-08-21T07:59:39.193 回答