解决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 相关文章推荐
另类调用flash无须激活的方法
Dec 27 Javascript
jQuery $.each的用法说明
Mar 22 Javascript
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
Feb 02 Javascript
jsPDF生成pdf后在网页展示实例
Jan 16 Javascript
值得分享和收藏的Bootstrap学习教程
May 12 Javascript
JSONP和批量操作功能的实现方法
Aug 21 Javascript
有关文件上传 非ajax提交 得到后台数据问题
Oct 12 Javascript
javascript实现文字无缝滚动效果
Aug 26 Javascript
JS计算输出100元钱买100只鸡问题的解决方法
Jan 04 Javascript
vue.js 微信支付前端代码分享
Feb 10 Javascript
JavaScript callback回调函数用法实例分析
May 08 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
Apr 17 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
php curl常用的5个经典例子
2017/01/20 PHP
PhpStorm2020.1 安装 debug - Postman 调用的详细教程
2020/08/17 PHP
Mootools 1.2教程 事件处理
2009/09/15 Javascript
jQuery中.live()方法的用法深入解析
2013/12/30 Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思?
2014/12/18 Javascript
javascript html5 canvas实现可拖动省份的中国地图
2016/03/11 Javascript
Google 地图类型详解及示例代码
2016/08/06 Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
2017/05/02 Javascript
ztree实现权限横向显示功能
2017/05/20 Javascript
Vue.js中轻松解决v-for执行出错的三个方案
2017/06/09 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
2017/08/24 jQuery
JS中关于正则的巧妙操作
2017/08/31 Javascript
Ionic学习日记实现验证码倒计时
2018/02/08 Javascript
解决layer.msg 不居中 ifram中的问题
2019/09/05 Javascript
python实现删除文件与目录的方法
2014/11/10 Python
PYTHON 中使用 GLOBAL引发的一系列问题
2016/10/12 Python
python list排序的两种方法及实例讲解
2017/03/20 Python
python中使用PIL制作并验证图片验证码
2018/03/15 Python
Python Json模块中dumps、loads、dump、load函数介绍
2018/05/15 Python
numpy matrix和array的乘和加实例
2018/06/28 Python
python3 字符串/列表/元组(str/list/tuple)相互转换方法及join()函数的使用
2019/04/03 Python
Django对数据库进行添加与更新的例子
2019/07/12 Python
Python 导入文件过程图解
2019/10/15 Python
如何使用Python脚本实现文件拷贝
2019/11/20 Python
PyTorch中model.zero_grad()和optimizer.zero_grad()用法
2020/06/24 Python
CSS3制作精致的照片墙特效
2016/06/07 HTML / CSS
戴森台湾线上商城:Dyson Taiwan
2018/05/21 全球购物
如何将整数int转换成字串String
2014/03/21 面试题
《小石潭记》教学反思
2014/02/13 职场文书
2014入党积极分子批评与自我批评思想汇报
2014/09/20 职场文书
喜迎建国70周年:有关爱国的名言名句
2019/09/24 职场文书
pandas 操作 Excel操作总结
2021/03/31 Python
pytorch中[..., 0]的用法说明
2021/05/20 Python
Python日志模块logging用法
2022/06/05 Python
JavaScript设计模式之原型模式详情
2022/06/21 Javascript
JavaScript实现简单的音乐播放器
2022/08/14 Javascript