[英]Focus on Input when Bootstrap Modal closes
在輸入字段“bootbox1”上出現模糊事件后,我想在消息模式關閉時使用Bootstrap Modal作為消息,將轉到輸入字段“bootbox2”。 但是輸入字段沒有得到關注。
我究竟做錯了什么?
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">×</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();
});
您需要等待hidden.bs.modal
事件觸發,而不是hide.bs.modal
。
根據事件hide.bs.modal
的Bootstrap Docs
調用hide實例方法時會立即觸發此事件。
而hidden.bs.modal
當模態完成對用戶的隱藏時將觸發此事件(將等待CSS轉換完成)。
由於在移除疊加層之前調用了focus
因此輸入無法獲得鍵盤焦點。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.