解决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 相关文章推荐
你的编程语言可以这样做吗?
Sep 07 Javascript
js判断iframe内的网页是否滚动到底部触发事件
Mar 18 Javascript
JavaScript中一个奇葩的IE浏览器判断方法
Apr 16 Javascript
js中函数调用的两种常用方法使用介绍
Jul 17 Javascript
JavaScript实现表格点击排序的方法
May 11 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
Jun 08 Javascript
vue.js 获取select中的value实例
Mar 01 Javascript
在HTML文档中嵌入JavaScript的四种方法
May 07 Javascript
Javascript中绑定click事件的四种方式介绍
Oct 26 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
Apr 24 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
Sep 14 Javascript
Element-ui upload上传文件限制的解决方法
Jan 22 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
大师制作的中短波矿石收音机
2020/04/02 无线电
php 遍历显示文件夹下所有目录、所有文件的函数,没有分页的代码
2008/11/14 PHP
PHP的变量总结 新手推荐
2011/04/18 PHP
php中file_exists函数使用详解
2015/05/08 PHP
Zend Framework路由器用法实例详解
2016/12/11 PHP
php使用yield对性能提升的测试实例分析
2019/09/19 PHP
jQuery 定时局部刷新(setInterval)
2010/11/19 Javascript
Jquery练习之表单验证实现代码
2010/12/14 Javascript
基于jQuery的输入框在光标位置插入内容, 并选中
2011/10/29 Javascript
javascript 星级评分效果(手写)
2012/12/24 Javascript
老生常谈JavaScript面向对象基础与this指向问题
2017/10/16 Javascript
详解Vue取消eslint语法限制
2018/08/04 Javascript
js实现选项卡效果
2020/03/07 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
2020/07/13 Javascript
vue同个按钮控制展开和折叠同个事件操作
2020/07/29 Javascript
[01:16:12]完美世界DOTA2联赛PWL S2 FTD vs Inki 第一场 11.21
2020/11/23 DOTA
Python下使用Scrapy爬取网页内容的实例
2018/05/21 Python
在Python中获取操作系统的进程信息
2019/08/27 Python
python 实现rolling和apply函数的向下取值操作
2020/06/08 Python
详解python tkinter包获取本地绝对路径(以获取图片并展示)
2020/09/04 Python
Clarks鞋美国官网:全球领军鞋履品牌
2017/05/13 全球购物
欧洲领先的火车票和大巴票预订平台:Trainline
2018/12/26 全球购物
乌克兰在线电子产品商店:MTA
2019/11/14 全球购物
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的
2015/07/24 面试题
社团活动总结
2014/04/28 职场文书
公司演讲稿开场白
2014/08/25 职场文书
戒毒悔改检讨书
2014/09/21 职场文书
房屋买卖协议书范本
2014/09/27 职场文书
地下停车场租赁协议范本
2014/10/07 职场文书
2014年高三班主任工作总结
2014/12/05 职场文书
2014年科普工作总结
2014/12/06 职场文书
鉴史问廉观后感
2015/06/10 职场文书
有趣的二维码:使用MyQR和qrcode来制作二维码
2021/05/10 Python
使用Python的开发框架Brownie部署以太坊智能合约
2021/05/28 Python
详解Java实现设计模式之责任链模式
2021/06/23 Java/Android
HTTP中的Content-type详解
2022/01/18 HTML / CSS