在引导程序中关闭模态后如何使模态触发按钮失去焦点 [英] How can I unfocus the modal trigger button after closing the modal in bootstrap

问题描述

关闭模态后我似乎无法模糊按钮.

I can't seem to blur the button after closing the modal.

$('#exampleModal').on('hidden.bs.modal', function(e){
        $('button').blur();
    });

我已经尝试了上述方法，但似乎仍然没有模糊它.我几乎什么都试过了.唯一的解决方案是设置超时并在模型完成隐藏转换后对其进行模糊处理.有什么更好的解决方案吗?

I've tried the above and it still doesn't seem to blur it. I've tried almost everything. The only solution is to set a timeout and blur it after the model finishes the hidden transition. Any better solution?

推荐答案

使用 .one() 绑定在模态插件中设置返回到触发器元素的焦点，不幸的是无法解除绑定.好消息是我们可以做到这一点:

The focus back to the trigger element is set within the modal plugin using a .one() binding, which unfortunately cannot be unbound. The good news is we can do this:

$('#myModal').on('shown.bs.modal', function(e){
    $('#myModaltrigger').one('focus', function(e){$(this).blur();});
});

其中 #myModaltrigger 是模态触发按钮的 ID.使用 .one() 绑定的原因是只有在显示模态后才会调用模糊函数.一旦它隐藏，并且发生焦点/模糊，按钮就可以正常聚焦，就像按 Tab 键一样，不会自动模糊.

Where #myModaltrigger is the ID of the modal trigger button. The reason to use the .one() binding is so that the function to blur will be called only after the modal is shown. Once it hides, and the focus/blur happens, the button can be focused normally, like by tabbing to it, without it automatically blurring.

参见这个工作示例

这篇关于在引导程序中关闭模态后如何使模态触发按钮失去焦点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！