解决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 学习历程和心得分享
Dec 12 Javascript
一些常用的JavaScript函数(json)附详细说明
May 25 Javascript
19个很有用的 JavaScript库推荐
Jun 27 Javascript
jQuery 选择表格(table)里的行和列及改变简单样式
Dec 15 Javascript
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
Jun 19 Javascript
Javascript单元测试框架QUnitjs详细介绍
May 08 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
Feb 23 Javascript
使用JS实现图片轮播的实例(前后首尾相接)
Sep 21 Javascript
Javascript读取上传文件内容/类型/字节数
Apr 30 Javascript
微信小程序使用字体图标的方法
May 23 Javascript
jQuery位置选择器用法实例分析
Jun 28 jQuery
Vue Router的手写实现方法实现
Mar 02 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
PHP5.3的垃圾回收机制(动态存储分配方案)深入理解
2012/12/10 PHP
支付宝服务窗API接口开发php版本
2016/07/20 PHP
PHP的中使用非缓冲模式查询数据库的方法
2017/02/05 PHP
PHP 访问数据库配置通用方法(json)
2018/05/20 PHP
PHP后台备份MySQL数据库的源码实例
2019/03/18 PHP
laravel与thinkphp之间的区别与优缺点
2021/03/02 PHP
prototype与jquery下Ajax实现的差别
2009/09/13 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
2013/10/25 Javascript
深入浅析NodeJs并发异步的回调处理
2015/12/21 NodeJs
JQuery 传送中文乱码问题的简单解决办法
2016/05/24 Javascript
jquery div模态窗口的简单实例
2016/05/28 Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
2016/12/08 Javascript
利用C/C++编写node.js原生模块的方法教程
2017/07/07 Javascript
Vue加载组件、动态加载组件的几种方式
2018/08/31 Javascript
javascriptvoid(0)含义以及与"#"的区别讲解
2019/01/19 Javascript
简单了解JavaScript异步
2019/05/23 Javascript
vue之debounce属性被移除及处理详解
2019/11/13 Javascript
[00:36]TI7不朽珍藏III——斯温不朽展示
2017/07/15 DOTA
[00:56]跨越时空加入战场 全新祈求者身心“失落奇艺侍祭”展示
2019/07/20 DOTA
在Debian下配置Python+Django+Nginx+uWSGI+MySQL的教程
2015/04/25 Python
查看Python安装路径以及安装包路径小技巧
2015/04/28 Python
浅谈python 四种数值类型(int,long,float,complex)
2016/06/08 Python
Python 多线程的实例详解
2017/09/07 Python
详谈在flask中使用jsonify和json.dumps的区别
2018/03/26 Python
Flask-WTF表单的使用方法
2019/07/12 Python
python 多进程并行编程 ProcessPoolExecutor的实现
2019/10/11 Python
PyTorch学习:动态图和静态图的例子
2020/01/06 Python
Clarria化妆品官方网站:购买天然和有机化妆品系列
2018/04/08 全球购物
美国折衷生活方式品牌:Robert Graham
2018/07/13 全球购物
泰国在线书店:SE-ED
2020/06/21 全球购物
大专生自荐信
2013/10/04 职场文书
委托公证书范本
2014/04/03 职场文书
小学生田径运动会广播稿
2014/09/11 职场文书
公司晚会主持词
2019/04/17 职场文书
使用ORM新增数据在Mysql中的操作步骤
2021/07/26 MySQL
MySQL数据库 安全管理
2022/05/06 MySQL