当Bootstrap Modal关闭时,请关注输入

时间:2014-08-15 12:39:31

标签: javascript jquery twitter-bootstrap focus

在输入字段" bootbox1"上出现模糊事件后,我想使用Bootstrap模态作为消息,在模态关闭后,焦点将转到输入字段" bootbox2&#34 ;。但是输入字段没有得到关注。

我做错了什么?

Demo

HTML

<input type="text" id="bootbox" />
<input type="text" id="bootbox2" />
<div id="myModal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
        <!-- dialog body -->
        <div class="modal-body">
            <button type="button" class="close" data-dismiss="modal">&times;</button>Hello world!</div>
        <!-- dialog buttons -->
        <div class="modal-footer">
            <button type="button" class="btn btn-primary">OK</button>
        </div>
    </div>
  </div>
</div>

JS

$('#bootbox').on('blur', function checkSelection(e) {
  $("#myModal").on("show", function () { // wire up the OK button to dismiss the modal when shown
    $("#myModal a.btn").on("click", function (e) {
        console.log("button pressed"); // just as an example...
        $("#myModal").modal('hide');
        $('#bootbox2').focus();
        // dismiss the dialog
    });
  });

  $("#myModal").on("hide", function () { // remove the event listeners when the dialog is dismissed
    $("#myModal a.btn").off("click");
    $('#bootbox2').focus();
  });

  $("#myModal").on("hidden", function () { // remove the actual elements from the DOM when fully hidden
    $("#myModal").remove();
  });

  $("#myModal").modal({ // wire up the actual modal functionality and show the dialog
    "backdrop": "static",
        "keyboard": true,
        "show": true // ensure the modal is shown immediately
  });

});

//this works
$('#bootbox2').on('blur', function checkSelection(e) {
  $('#bootbox').focus();
});

1 个答案:

答案 0 :(得分:12)

您需要等待hidden.bs.modal事件触发,而不是hide.bs.modal

根据事件hide.bs.modal的{​​{3}}

  

隐藏实例方法一旦触发,就会立即触发此事件   调用。

hidden.bs.modal

  

当模态完成隐藏时,会触发此事件   user(将等待CSS转换完成)​​。

由于在删除叠加层之前调用了focus,因此输入无法获得键盘焦点。