解决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 在各个浏览器中执行的耐性
Apr 06 Javascript
js判断鼠标同时离开两个div的思路及代码
May 31 Javascript
深入理解javascript中defer的作用
Dec 11 Javascript
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
Dec 12 Javascript
JSON格式化输出
Nov 10 Javascript
jQuery中map()方法用法实例
Jan 06 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
Dec 02 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
Sep 14 Javascript
使用Vue制作图片轮播组件思路详解
Mar 21 Javascript
JS中的防抖与节流及作用详解
Apr 01 Javascript
Vue filter 过滤当前时间 实现实时更新效果
Dec 20 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
Mar 10 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中数据库单例模式的实现代码分享
2014/08/21 PHP
PHP中的命名空间相关概念浅析
2015/01/22 PHP
php文件类型MIME对照表(比较全)
2016/10/07 PHP
PHP精确计算功能示例
2016/11/29 PHP
php数据序列化测试实例详解
2017/08/12 PHP
PHP析构函数destruct与垃圾回收机制的讲解
2019/03/22 PHP
JS分割字符串并放入数组的函数
2011/07/04 Javascript
基于jquery的多功能软键盘插件
2012/07/25 Javascript
探寻Javascript执行效率问题
2014/11/12 Javascript
JS实现的生成随机数的4个函数分享
2015/02/11 Javascript
js简单实现点击左右运动的方法
2015/04/10 Javascript
JavaScript学习小结(7)之JS RegExp
2015/11/29 Javascript
javascript字符串函数汇总
2015/12/06 Javascript
JS延时器提示框的应用实例代码解析
2016/04/27 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
2016/05/10 Javascript
javascript cookie基础应用之记录用户名的方法
2016/09/20 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
2017/02/24 Javascript
Angular中自定义Debounce Click指令防止重复点击
2017/07/26 Javascript
nodejs实现OAuth2.0授权服务认证
2017/12/27 NodeJs
基于JavaScript实现简单的音频播放功能
2018/01/07 Javascript
js监听html页面的上下滚动事件方法
2018/09/11 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
2019/05/10 Javascript
JavaScript实现星级评价效果
2019/05/17 Javascript
js通过canvas生成图片缩略图
2020/10/02 Javascript
[53:10]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs VG 第一场
2018/04/11 DOTA
Python reduce()函数的用法小结
2017/11/15 Python
基于python 二维数组及画图的实例详解
2018/04/03 Python
python学生信息管理系统(完整版)
2020/04/05 Python
Python使用百度翻译开发平台实现英文翻译为中文功能示例
2019/08/08 Python
Perfume’s Club法国站:购买香水和化妆品
2019/05/02 全球购物
马来西亚户外装备商店:PTT Outdoor
2019/07/13 全球购物
旅游节目策划方案
2014/05/26 职场文书
公司授权委托书格式样本
2014/10/01 职场文书
安全检查汇报材料
2014/12/26 职场文书
社会实践单位意见
2015/06/05 职场文书
深入解析NumPy中的Broadcasting广播机制
2021/05/30 Python