专注于输入何时 Bootstrap Modal 关闭

在输入字段中的侵蚀事件之后 "bootbox1" 我想在模态关闭后使用引导模态的邮件,焦点将进入输入字段 "bootbox2". 但输入字段没有接受焦点。

我究竟做错了什么?

http://jsfiddle.net/barryit99/Lqtuykr2/2/
HTML


<input id="bootbox" type="text"/>
<input id="bootbox2" type="text"/>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- dialog body -->
<div class="modal-body">
<button class="close" data-dismiss="modal" type="button">×</button>Hello world!</div>
<!-- dialog buttons -->
<div class="modal-footer">
<button class="btn btn-primary" type="button">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

.

根据
https://getbootstrap.com/docs/ ... vents
对于事件
hide.bs.modal


调用方法后,此事件会立即启动。 hide instance
.

然而
hidden.bs.modal


当暗中藏起的模态完成时,将触发此事件
用户 /将等待完成 CSS 过渡/.

因为你的
focus

在删除覆盖之前调用它,输入不能占用键盘焦点。

要回复问题请先登录注册