您的位置：首页 > Web前端 > BootStrap

BootStrap模态框和select2合用时input无法获取焦点的解决方法

2017-09-01 14:00 926 查看

在bootstrap的模态框里使用select2插件,会导致select2里的input输入框没有办法获得焦点,没有办法输入.

解决方法:

1.

把页面中的 

tabindex="-1" 
删掉（测试成功）:

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Panel</h3>
</div>
<div class="modal-body" style="max-height: 800px">
<div id="myModal" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Panel</h3>
</div>
<div class="modal-body" style="max-height: 800px">

可以在onshown方法里面做处理，主要原理就是因为bootstrap的

tabindex='-1'
,占用了select2的
tabindex='0'
，脚本做处理 模态框显示出来后，将模态框的tabindex属性删掉

BootstrapDialog.show({
onshown: function (dialogRef) {
$("#"+dialogRef.getId()).removeAttr("tabindex");
}
})

2.

重写enforceFocus方法（测试发现没有效果）:

$.fn.modal.Constructor.prototype.enforceFocus = function() {};

总结

以上所述是小编给大家介绍的BootStrap模态框和select2合用时input无法获取焦点的解决方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  bootstrap select2 模态框
相关文章推荐
新的分享
章节导航