解决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 相关文章推荐
alixixi runcode.asp的代码不错的应用
Aug 08 Javascript
jQuery 事件队列调整方法
Sep 18 Javascript
商城常用滚动的焦点图效果代码简单实用
Mar 28 Javascript
node.js中的fs.utimesSync方法使用说明
Dec 15 Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
May 03 Javascript
Bootstrap布局之栅格系统详解
Jun 13 Javascript
js判断出两个字符串最大子串的函数实现方法
Nov 01 Javascript
如何获取元素的最终background-color
Feb 06 Javascript
Vue组件中prop属性使用说明实例代码详解
May 31 Javascript
node微信开发之获取access_token+自定义菜单
Mar 17 Javascript
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
jquery实现的分页显示功能示例
Aug 23 jQuery
一个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
十大催泪虐心动漫电影,有几部你还没看
2020/03/04 日漫
漫威DC即将合作联动,而双方早已经秘密开始
2020/04/09 欧美动漫
PHP基础陷阱题(变量赋值)
2012/09/12 PHP
PHP调用VC编写的COM组件实例
2014/03/29 PHP
php中解析带中文字符的url函数分享
2015/01/20 PHP
php使用Jpgraph绘制复杂X-Y坐标图的方法
2015/06/10 PHP
在Linux系统下一键重新安装WordPress的脚本示例
2015/06/30 PHP
PHP正则表达式过滤html标签属性(DEMO)
2016/05/04 PHP
jQuery插件开发基础简单介绍
2013/01/07 Javascript
jquery获取div宽度的实现思路与代码
2013/01/13 Javascript
按Enter键触发事件的jquery方法实现代码
2014/02/17 Javascript
jQuery 删除或是清空某个HTML元素示例
2014/08/04 Javascript
24款热门实用的jQuery插件推荐
2014/12/24 Javascript
jQuery实现平滑滚动到指定锚点的方法
2015/03/20 Javascript
js实现分享到随页面滚动而滑动效果的方法
2015/04/10 Javascript
实例分析nodejs模块xml2js解析xml过程中遇到的坑
2017/03/18 NodeJs
JS实现前端缓存的方法
2017/09/21 Javascript
Nodejs模块的调用操作实例分析
2018/12/25 NodeJs
小程序多图列表实现性能优化的方法步骤
2019/05/28 Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
2019/06/21 Javascript
layer.open弹层查看缩略图的原图,自适应大小的实例
2019/09/05 Javascript
JS组件库AlloyTouch实现图片轮播过程解析
2020/05/29 Javascript
JavaScript实现弹出窗口效果
2020/12/09 Javascript
vue实现树状表格效果
2020/12/29 Vue.js
[01:48]DOTA2 2015国际邀请赛中国区预选赛第二日战报
2015/05/27 DOTA
使用Python判断IP地址合法性的方法实例
2014/03/13 Python
Python之web模板应用
2017/12/26 Python
详解python项目实战:模拟登陆CSDN
2019/04/04 Python
Python3和pyqt5实现控件数据动态显示方式
2019/12/13 Python
Python爬虫使用bs4方法实现数据解析
2020/08/25 Python
解决Pymongo insert时会自动添加_id的问题
2020/12/05 Python
selenium设置浏览器为headless无头模式(Chrome和Firefox)
2021/01/08 Python
Ray-Ban雷朋美国官网:全球领先的太阳眼镜品牌
2016/07/20 全球购物
德国香水、化妆品和护理产品网上商店:Parfumdreams
2018/09/26 全球购物
网络信息管理员岗位职责
2014/01/05 职场文书
2014年母亲节寄语
2014/05/07 职场文书