脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → bootstrap模态框和select2合用input无法获取焦点

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

 更新时间：2017年09月01日 14:00:56   作者：阿杰de博客  
在bootstrap的模态框里使用select2插件,会导致select2里的input输入框没有办法获得焦点,没有办法输入。怎么解决这个问题呢？下面小编给大家带来了BootStrap模态框和select2合用时input无法获取焦点的解决方法，一起看看吧

在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无法获取焦点的解决方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • js 取消页面可以选中文字的功能方法

    js 取消页面可以选中文字的功能方法

    下面小编就为大家分享一篇js 取消页面可以选中文字的功能方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • js DIV滚动条随机位置的设置技巧

    js DIV滚动条随机位置的设置技巧

    刚才一个朋友告诉我他的blog友情链接太多了，所以把所有链接放到一个DIV中，加了个滚动条，可是他又不想每次别人来看，看到的都是前面几个链接，于是问我有没有什么办法，想了一个，呵呵，正好有个办法
    2008-11-11
  • 解决Extjs下拉框不显示的问题

    解决Extjs下拉框不显示的问题

    一个父容器也是window的window下的comboBox在页面中点击无效，但是在控制台中查看它的store却是有值的，问题在于没有显示。下面小编给大家分享Extjs下拉框不显示的问题，需要的的朋友参考下吧
    2017-06-06
  • 用JavaScript绘图 ——JS2D函数集

    用JavaScript绘图 ——JS2D函数集

    用JavaScript绘图 ——JS2D函数集...
    2007-01-01
  • 用javascript实现的支持lrc歌词的播放器

    用javascript实现的支持lrc歌词的播放器

    用javascript实现的支持lrc歌词的播放器...
    2007-05-05
  • 详解webpack 最简打包结果分析

    详解webpack 最简打包结果分析

    这篇文章主要介绍了详解webpack 最简打包结果分析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • JS实现动态生成html table表格的方法分析

    JS实现动态生成html table表格的方法分析

    这篇文章主要介绍了JS实现动态生成html table表格的方法,结合实例形式分析了javascript针对数组数据的读取、遍历以及动态生成相关操作技巧,需要的朋友可以参考下
    2018-07-07
  • JavaScript中string对象

    JavaScript中string对象

    和JAVA中String对象用处一样啊，javascript中的String对象也有自己的方法，和JAVA中的类似。
    2015-06-06
  • 聊聊JavaScript如何实现继承及特点

    聊聊JavaScript如何实现继承及特点

    “继承”是面向对象编程里面经常提及到的概念，它的目的是实现代码复用。这篇文章主要介绍了聊聊JavaScript如何实现继承及特点，有兴趣的可以了解一下。
    2017-04-04
  • 详解Javascript实践中的命令模式

    详解Javascript实践中的命令模式

    这篇文章主要介绍了Javascript实践中的命令模式，对命令模式感兴趣的同学，可以参考下
    2021-05-05

最新评论