带有单个文本输入字段的Bootstrap模式对话框始终在Enter键上关闭

Question

为什么这个带有一个文本字段的简单模态对话框(和NO按钮)在焦点位于字段上并且按下Enter时忽略？

<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解除)

Answer 1

感谢@mccannf指出我正确的方向.这似乎是比一般特定于Bootstrap的更一般的表单提交问题.两种解决方案

1.将表单的onsubmit属性设置为onsubmit ="return false;" (/sf/answers/93041791/)

我最喜欢这个解决方案,因为它似乎难以预测(并且可能与浏览器有关)哪些表单字段可能会也可能不会在输入时触发表单提交.

所以,在我的原始问题的例子中:

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

2.设置onkeydown(或onkeyup？)属性以在event.keyCode == 13时返回false (/sf/answers/142655481/)在此链接中,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);">

Answer 2

它只是为了澄清答案,并回应雷金的评论.

1.将表单的onsubmit属性设置为onsubmit ="return false;" (/sf/answers/93041791/)

当您通过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>

正如你所看到的那样,表单提交是通过jquery调用onclick按钮保存id.

但是如果你想添加动作来形成标签,那么你可能必须使用第二种解决方案

2.当event.keyCode == 13(/sf/answers/142655481/)时,将onkeydown(或onkeyup？)属性设置为返回false

在我看来,我不喜欢这个解决方案,以防你想要建立形式dinamically.

Answer 3

只是对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>