解决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 相关文章推荐
自己的js工具_Form 封装
Aug 21 Javascript
javascript学习笔记(三)显示当时时间的代码
Apr 08 Javascript
javascript查找字符串中出现最多的字符和次数的小例子
Oct 29 Javascript
javascript实现iframe框架延时加载的方法
Oct 30 Javascript
jQuery中clearQueue()方法用法实例
Dec 29 Javascript
动态加载jQuery的两种方法实例分析
Jul 17 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
Oct 22 Javascript
解析浏览器端的AJAX缓存机制
Jun 21 Javascript
bootstrap datetimepicker2.3.11时间插件使用
Nov 19 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
Apr 25 Javascript
vue组件间通信六种方式(总结篇)
May 15 Javascript
详解JavaScript中new操作符的解析和实现
Sep 04 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 和 MySQL 基础教程(三)
2006/10/09 PHP
抓取并下载CSS中所有图片文件的php代码
2011/09/26 PHP
PHP写的资源下载防盗链类分享
2014/05/12 PHP
smarty半小时快速上手入门教程
2014/10/27 PHP
php函数传值的引用传递注意事项分析
2016/06/25 PHP
php简单解析mysqli查询结果的方法(2种方法)
2016/06/29 PHP
PHP利用pdo_odbc实现连接数据库示例【基于ThinkPHP5.1搭建的项目】
2019/05/13 PHP
插件:检测javascript的内存泄漏
2007/03/04 Javascript
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
2013/01/18 Javascript
Javascript 中 null、NaN和undefined的区别总结
2013/04/10 Javascript
js实现浏览器的各种菜单命令比如打印、查看源文件等等
2013/10/24 Javascript
javascript中apply和call方法的作用及区别说明
2014/02/14 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
2014/03/08 Javascript
js操作输入框中选择内容兼容IE及其他主流浏览器
2014/04/22 Javascript
jquery专业的导航菜单特效代码分享
2015/08/29 Javascript
10个很棒的jQuery代码片段
2015/09/24 Javascript
javascript类型系统 Window对象学习笔记
2016/01/07 Javascript
JS判断是否长按某一键的方法
2016/03/02 Javascript
jQuery实现的右下角广告窗体跟随效果示例
2016/09/16 Javascript
Vue 过滤器filters及基本用法
2017/12/26 Javascript
openlayers4实现点动态扩散
2020/08/17 Javascript
[01:24:34]2014 DOTA2华西杯精英邀请赛5 24 DK VS LGD
2014/05/25 DOTA
Python查询Mysql时返回字典结构的代码
2012/06/18 Python
Python入门篇之数字
2014/10/20 Python
Python基于smtplib实现异步发送邮件服务
2015/05/28 Python
Python中的字符串替换操作示例
2016/06/27 Python
Python正则捕获操作示例
2017/08/19 Python
python 拷贝特定后缀名文件,并保留原始目录结构的实例
2018/04/27 Python
Python3自动签到 定时任务 判断节假日的实例
2018/11/13 Python
Tensorflow中的dropout的使用方法
2020/03/13 Python
eDreams加拿大:廉价航班、酒店和度假
2019/03/29 全球购物
学校岗位设置方案
2014/01/16 职场文书
2014幼儿园教师师德师风演讲稿
2014/09/10 职场文书
临时用工协议书范本
2014/10/29 职场文书
2016年万圣节活动个人总结
2016/04/05 职场文书
前端传参数进行Mybatis调用mysql存储过程执行返回值详解
2022/08/14 MySQL