解决select2在bootstrap modal中不能正常使用的问题


Posted in Javascript onAugust 09, 2018

最近用bootstrap做前端框架,遇到select2单选框在bootstrap modal中不能正常使用,输入框不能获取焦点智能过滤;如下图:

解决select2在bootstrap modal中不能正常使用的问题

解决方法一:在bootstrap.js的模态框js内加上

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

如图:

解决select2在bootstrap modal中不能正常使用的问题

第二种情况,网上看到的,不是我的体验:

他是说:由于 select2和bootstrap模态框一起使用导致select2的input获取不到焦点问题

解决办法:是把页面中的模态框的属性 tabindex="-1" 删掉, 或者值改为1

如图:

解决select2在bootstrap modal中不能正常使用的问题

我这样做了,并没有解决,所以然并卵。。。。。。只是写在这里,担心这样也是一种情况而已!

再次说明:我是第一种方法解决的。

以上这篇解决select2在bootstrap modal中不能正常使用的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
自适应图片大小的弹出窗口
Jul 27 Javascript
IE JS编程需注意的内存释放问题
Jun 23 Javascript
JS获取父节点方法
Aug 20 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
Mar 12 Javascript
JS实现浏览器状态栏显示时间的方法
Oct 27 Javascript
angular基于ng-alain定义自己的select组件示例
Feb 23 Javascript
微信小程序WebSocket实现聊天对话功能
Jul 06 Javascript
video.js 实现视频只能后退不能快进的思路详解
Aug 09 Javascript
vue基础之data存储数据及v-for循环用法示例
Mar 08 Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
Apr 15 Javascript
vue获取验证码倒计时组件
Aug 26 Javascript
Node.js 实现抢票小工具 & 短信通知提醒功能
Oct 22 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
Aug 09 #Javascript
bootstrap动态调用select下拉框的实例代码
Aug 09 #Javascript
vue.js 中使用(...)运算符报错的解决方法
Aug 09 #Javascript
select2 ajax 设置默认值,初始值的方法
Aug 09 #Javascript
bootstrap select2插件用ajax来获取和显示数据的实例
Aug 09 #Javascript
微信小程序url传参写变量的方法
Aug 09 #Javascript
angular6.x中ngTemplateOutlet指令的使用示例
Aug 09 #Javascript
You might like
为了这两部电子管收音机,买了6套全新电子管和10粒刻度盘灯泡
2021/03/02 无线电
PHP守护进程化在C和PHP环境下的实现
2017/11/21 PHP
javascript 中对象的继承〔转贴〕
2007/01/22 Javascript
基于jQuery中对数组进行操作的方法
2013/04/16 Javascript
JavaScript二维数组实现的省市联动菜单
2014/05/08 Javascript
jquery实现不包含当前项的选择器实例
2015/06/25 Javascript
AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
2016/02/25 Javascript
AngularJS入门教程之AngularJS表达式
2016/04/18 Javascript
论Bootstrap3和Foundation5网格系统的异同
2016/05/16 Javascript
jquery判断checkbox是否选中及改变checkbox状态的实现方法
2016/05/26 Javascript
JS实现星星评分功能实例代码(两种方法)
2016/06/09 Javascript
基于Vue2的移动端开发环境搭建详解
2016/11/03 Javascript
基于vue的fullpage.js单页滚动插件
2017/03/20 Javascript
JavaScript实现简单的树形菜单效果
2017/06/23 Javascript
React Router v4 入坑指南(小结)
2018/04/08 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
2021/01/30 Javascript
玩转vue的slot内容分发
2018/09/22 Javascript
vue动态注册组件实例代码详解
2019/05/30 Javascript
使用axios发送post请求,将JSON数据改为form类型的示例
2019/10/31 Javascript
vue 开发之路由配置方法详解
2019/12/02 Javascript
Python的Django框架中URLconf相关的一些技巧整理
2015/07/18 Python
python 自动化将markdown文件转成html文件的方法
2016/09/23 Python
python编程实现希尔排序
2017/04/13 Python
Python实现PS图像抽象画风效果的方法
2018/01/23 Python
django基于存储在前端的token用户认证解析
2019/08/06 Python
python实现文件批量编码转换及注意事项
2019/10/14 Python
python之pymysql模块简单应用示例代码
2019/12/16 Python
Python getattr()函数使用方法代码实例
2020/08/10 Python
详解Html5 Canvas画线有毛边解决方法
2018/03/01 HTML / CSS
如何反序的迭代一个序列?how do I iterate over a sequence in reverse order
2012/02/04 面试题
小学毕业感言300字
2014/02/19 职场文书
老干部工作先进集体事迹材料
2014/05/21 职场文书
驻村工作先进事迹
2014/08/14 职场文书
个人剖析材料及整改措施
2014/10/07 职场文书
pandas 操作 Excel操作总结
2021/03/31 Python
hive数据仓库新增字段方法
2022/06/25 数据库