源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2021-03-27 19:17 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:BootStrap模态框和select2合用时input无法获取焦点的解决方法
在bootstrap的模态框里使用select2插件,会导致select2里的input输入框没有办法获得焦点,没有办法输入. [b]解决方法:[/b] 1. 把页面中的 [code] tabindex="-1"  [/code]删掉(测试成功):
<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的[code]tabindex='-1'[/code],占用了select2的[code]tabindex='0'[/code],脚本做处理 模态框显示出来后,将模态框的tabindex属性删掉
BootstrapDialog.show({
   onshown: function (dialogRef) {
    $("#"+dialogRef.getId()).removeAttr("tabindex");
  }
})
2. 重写enforceFocus方法(测试发现没有效果):
$.fn.modal.Constructor.prototype.enforceFocus = function() {};
[b]总结[/b] 以上所述是小编给大家介绍的BootStrap模态框和select2合用时input无法获取焦点的解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对编程素材网网站的支持!
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部