BootStrap模态框和select2合用时input无法获取焦点的解决方法


Posted in Javascript onSeptember 01, 2017

在bootstrap的模态框里使用select2插件,会导致select2里的input输入框没有办法获得焦点,没有办法输入.

解决方法:

1.

把页面中的  tabindex="-1"  删掉(测试成功):

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
  <h3 id="myModalLabel">Panel</h3>
 </div>
<div class="modal-body" style="max-height: 800px">
<div id="myModal" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
  <h3 id="myModalLabel">Panel</h3>
 </div>
<div class="modal-body" style="max-height: 800px">

可以在onshown方法里面做处理,主要原理就是因为bootstrap的tabindex='-1',占用了select2的tabindex='0',脚本做处理 模态框显示出来后,将模态框的tabindex属性删掉

BootstrapDialog.show({
   onshown: function (dialogRef) {
    $("#"+dialogRef.getId()).removeAttr("tabindex");
  }
})

2.

重写enforceFocus方法(测试发现没有效果):

$.fn.modal.Constructor.prototype.enforceFocus = function() {};

总结

以上所述是小编给大家介绍的BootStrap模态框和select2合用时input无法获取焦点的解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Jquery 弹出层插件实现代码
Oct 24 Javascript
jquery 检测元素是否存在的实例代码
Nov 19 Javascript
表格奇偶行设置不同颜色的核心JS代码
Dec 24 Javascript
深入理解JavaScript中的浮点数
May 18 Javascript
js 判断附件后缀的简单实现方法
Oct 11 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
Nov 06 Javascript
解决vue.js this.$router.push无效的问题
Sep 03 Javascript
微信小程序实现通过js操作wxml的wxss属性示例
Dec 06 Javascript
使用Angular Cli如何创建Angular私有库详解
Jan 30 Javascript
javascript实现导航栏分页效果
Jun 27 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
Sep 11 Javascript
如何在JavaScript中使用localStorage详情
Feb 04 Javascript
Angularjs实现上传图片预览功能
Sep 01 #Javascript
JavaScript中使用参数个数实现重载功能
Sep 01 #Javascript
bootstrap-table实现服务器分页的示例 (spring 后台)
Sep 01 #Javascript
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 #jQuery
基于Vue.js 2.0实现百度搜索框效果
Dec 28 #Javascript
JavaScript闭包的简单应用
Sep 01 #Javascript
写给vue新手们的vue渲染页面教程
Sep 01 #Javascript
You might like
php仿discuz分页效果代码
2008/10/02 PHP
php adodb操作mysql数据库
2009/03/19 PHP
dedecms 批量提取第一张图片最为缩略图的代码(文章+软件)
2009/10/29 PHP
discuz免激活同步登入代码修改方法(discuz同步登录)
2013/12/24 PHP
php操作redis中的hash和zset类型数据的方法和代码例子
2014/07/05 PHP
详解WordPress中添加友情链接的方法
2016/05/21 PHP
完美解决在ThinkPHP控制器中命名空间的问题
2017/05/05 PHP
2020最新版 PhpStudy V8.1版本下载安装使用详解
2020/10/30 PHP
jQuery 名称冲突的解决方法
2011/04/08 Javascript
getElementByIdx_x js自定义getElementById函数
2012/01/24 Javascript
jquery 插件学习(五)
2012/08/06 Javascript
JavaScript DOM基础
2015/04/13 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
2016/05/28 Javascript
详细谈谈javascript的对象
2016/07/31 Javascript
nodejs微信扫码支付功能实现
2018/02/17 NodeJs
配置eslint规范项目代码风格
2019/03/11 Javascript
微信小程序wepy框架学习和使用心得详解
2019/05/24 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
2019/09/05 Javascript
three.js 如何制作魔方
2020/07/31 Javascript
python 创建弹出式菜单的实现代码
2017/07/11 Python
Python获取当前页面内所有链接的四种方法对比分析
2017/08/19 Python
python模拟表单提交登录图书馆
2018/04/27 Python
Python3利用Dlib19.7实现摄像头人脸识别的方法
2018/05/11 Python
Python实现base64编码的图片保存到本地功能示例
2018/06/22 Python
python3爬虫获取html内容及各属性值的方法
2018/12/17 Python
Python 获取异常(Exception)信息的几种方法
2020/12/29 Python
利用css3画个同心圆示例代码
2017/07/03 HTML / CSS
Otel.com:折扣酒店预订
2017/08/24 全球购物
美国女孩洋娃娃店:American Girl
2017/10/24 全球购物
美国保健品专家:Life Extension
2018/05/04 全球购物
帕克纽约:PARKER NY
2018/12/09 全球购物
C++:局部变量能否和全局变量重名
2014/03/03 面试题
会计专业应届生自荐信
2014/06/28 职场文书
不同意离婚代理词
2015/05/23 职场文书
解决Golang time.Parse和time.Format的时区问题
2021/04/29 Golang
MySQL系列之六 用户与授权
2021/07/02 MySQL