解决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 相关文章推荐
JavaScript OOP类与继承
Nov 15 Javascript
理解JavaScript中Promise的使用
Jan 18 Javascript
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
react native与webview通信的示例代码
Sep 25 Javascript
在Vue中使用highCharts绘制3d饼图的方法
Feb 08 Javascript
vue中echarts3.0自适应的方法
Feb 26 Javascript
vue中v-for加载本地静态图片方法
Mar 03 Javascript
Typescript的三种运行方式(小结)
Sep 18 Javascript
浅谈layui分页控件field参数接收对象的问题
Sep 20 Javascript
微信小程序 scroll-view 实现锚点跳转功能
Dec 12 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
Aug 07 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 Vue.js
一个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&MYSQL留言板源码
2020/07/19 PHP
php解决crontab定时任务不能写入文件问题的方法分析
2019/09/16 PHP
在PHP中实现使用Guzzle执行POST和GET请求
2019/10/15 PHP
关于IE7 IE8弹出窗口顶上
2008/12/22 Javascript
javascript encodeURI和encodeURIComponent的比较
2010/04/03 Javascript
jquery $.getJSON()跨域请求
2011/12/21 Javascript
easyui datagrid 键盘上下控制选中行示例
2014/03/31 Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
2014/05/08 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
2015/03/13 Javascript
js利用clipboardData实现截屏粘贴功能
2016/10/12 Javascript
手机端js和html5刮刮卡效果
2020/09/29 Javascript
canvas红包照片实例分享
2017/02/28 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
2018/08/31 Javascript
Node.js API详解之 os模块用法实例分析
2020/05/06 Javascript
[05:22]DOTA2 2015国际邀请赛中国区预选赛首日TOP10
2015/05/26 DOTA
python数据处理实战(必看篇)
2017/06/11 Python
深入浅析python 中的匿名函数
2018/05/21 Python
Python视频编辑库MoviePy的使用
2020/04/01 Python
python操作微信自动发消息的实现(微信聊天机器人)
2020/07/14 Python
HTML5实现视频直播功能思路详解
2017/11/16 HTML / CSS
英国鞋类及配饰零售商:Kurt Geiger
2017/02/04 全球购物
Holland & Barrett爱尔兰:英国领先的健康零售商
2019/03/31 全球购物
Dogeared官网:在美国手工制作的珠宝
2019/08/24 全球购物
Gerry Weber德国官网:优质女性时装,德国最大的时装公司之一
2019/11/02 全球购物
瑞典耳机品牌:URBANISTA
2019/12/03 全球购物
建筑系毕业生自我鉴定
2014/01/24 职场文书
社区平安建设汇报材料
2014/08/14 职场文书
2014年合同管理工作总结
2014/12/02 职场文书
学习与创新自我评价
2015/03/09 职场文书
建筑技术负责人岗位职责
2015/04/13 职场文书
积极心理学课程心得体会
2016/01/22 职场文书
如何制定一份可行的计划!
2019/06/21 职场文书
jquery插件实现图片悬浮
2021/04/16 jQuery
Nginx进程管理和重载原理详解
2021/04/22 Servers
如何解决springcloud feign 首次调用100%失败的问题
2021/06/23 Java/Android
Win11怎么跳过联网验机 ?Win11跳过联网验机激活教程
2022/04/05 数码科技