解决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 相关文章推荐
代码获取历史上的今天发生的事
Apr 11 Javascript
高性能JavaScript模板引擎实现原理详解
Feb 05 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
Aug 07 Javascript
Bootstrap编写导航栏和登陆框
May 30 Javascript
AngularJS 执行流程详细介绍
Aug 18 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
Aug 25 Javascript
jQuery表单对象属性过滤选择器实例详解
Sep 13 Javascript
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
关于javascript sort()排序你可能忽略的一点理解
Jul 18 Javascript
vue-swiper的使用教程
Aug 30 Javascript
Vue下拉框回显并默认选中随机问题
Sep 06 Javascript
详解Vue项目部署遇到的问题及解决方案
Jan 11 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作为网站开发语言的原因分享
2012/01/03 PHP
php DOS攻击实现代码(附如何防范)
2012/05/29 PHP
PHP 常用数组内部函数(Array Functions)介绍
2013/06/05 PHP
解析mysql中UNIX_TIMESTAMP()函数与php中time()函数的区别
2013/06/24 PHP
使用HMAC-SHA1签名方法详解
2013/06/26 PHP
YII框架中搜索分页jQuery写法详解
2016/12/19 PHP
PHP中常用的三种设计模式详解【单例模式、工厂模式、观察者模式】
2019/06/14 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
Javascript - HTML的request类
2006/07/15 Javascript
pjblog修改技巧汇总
2007/03/12 Javascript
Mootools 1.2教程(2) DOM选择器
2009/09/14 Javascript
JavaScript通过RegExp实现客户端验证处理程序
2013/05/07 Javascript
利用浏览器全屏api实现js全屏
2014/01/16 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
2015/11/19 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
2016/06/07 Javascript
基于JavaScript实现淘宝商品广告效果
2017/08/10 Javascript
浅谈Node异步编程的机制
2017/10/18 Javascript
js实现点击按钮复制文本功能
2020/07/20 Javascript
JS实现快递单打印功能【推荐】
2018/06/21 Javascript
Google开源的Python格式化工具YAPF的安装和使用教程
2016/05/31 Python
python计算两个地址之间的距离方法
2018/06/09 Python
Linux系统(CentOS)下python2.7.10安装
2018/09/26 Python
用Python实现数据的透视表的方法
2018/11/16 Python
linux下python中文乱码解决方案详解
2019/08/28 Python
python画蝴蝶曲线图的实例
2019/11/21 Python
Pycharm如何运行.py文件的方法步骤
2020/03/03 Python
Django 返回json数据的实现示例
2020/03/05 Python
python实现同一局域网下传输图片
2020/03/20 Python
Django使用Profile扩展User模块方式
2020/05/14 Python
html5录音功能实战示例
2019/03/25 HTML / CSS
XMLHttpRequest对象在IE和Firefox中创建方式有没有不同
2016/03/23 面试题
医学求职信
2014/05/28 职场文书
新郎新娘答谢词
2015/01/04 职场文书
社团个人总结范文
2015/03/05 职场文书
2015年度个人教学工作总结
2015/05/20 职场文书
小学数学新课改心得体会
2016/01/22 职场文书