相关疑难解决方法(0)

按下Enter键时,Bootstrap 3模态关闭,但不提交表单

我有以下Twitter Bootstrap 3模式,在模态内部有一个表单:

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h2 class="modal-title">Add new page</h2>
        </div>
        <div class="modal-body">
            <form class="form-horizontal add-new-page-form">
                <fieldset>
                    <!-- Label -->
                    <div class="form-group">
                      <label class="col-md-4 control-label" for="labelInput">Label</label>
                      <div class="col-md-5">
                      <input id="labelInput" name="labelInput" type="text" data-field="label" class="form-control input-md">
                      <span class="help-block">Page label</span>
                      </div>
                    </div>

                    <!-- Button (Double) -->
                    <div class="form-group"> …
Run Code Online (Sandbox Code Playgroud)

html forms jquery twitter-bootstrap

10
推荐指数
1
解决办法
2万
查看次数

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

为什么这个带有一个文本字段的简单模态对话框(和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>
Run Code Online (Sandbox Code Playgroud)

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

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

forms modal-dialog twitter-bootstrap

9
推荐指数
3
解决办法
2万
查看次数

标签 统计

forms ×2

twitter-bootstrap ×2

html ×1

jquery ×1

modal-dialog ×1