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 相关文章推荐
Egret引擎开发指南之创建项目
Sep 03 Javascript
深入学习JavaScript中的Rest参数和参数默认值
Jul 28 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
Aug 10 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
Mar 21 Javascript
BootStrap中Table分页插件使用详解
Oct 09 Javascript
创建一般js对象的几种方式
Jan 19 Javascript
详解axios在vue中的简单配置与使用
May 10 Javascript
Vue的百度地图插件尝试使用
Sep 06 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
Nov 21 Javascript
Vue实现简易翻页效果源码分享
Nov 08 Javascript
vue自定义指令directive的使用方法
Apr 07 Javascript
vue全局使用axios的操作
Sep 08 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
使用dump函数,给php加断点测试
2013/06/25 PHP
php实现的递归提成方案实例
2015/11/14 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
JavaScript Cookie的读取和写入函数
2009/12/08 Javascript
javascript转换字符串为dom对象(字符串动态创建dom)
2010/05/10 Javascript
javascript 获取所有id中包含某关键字的控件的实现代码
2010/11/25 Javascript
jQuery中:last-child选择器用法实例
2014/12/31 Javascript
基于jQuery实现顶部导航栏功能
2016/12/27 Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
2017/04/07 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
2017/05/18 Javascript
jquery动态添加带有样式的HTML标签元素方法
2018/02/24 jQuery
vue文件树组件使用详解
2018/03/29 Javascript
JavaScript中Array方法你该知道的正确打开方法
2018/09/11 Javascript
详解搭建es6+devServer简单开发环境
2018/09/25 Javascript
nodejs中方法和模块用法示例
2018/12/24 NodeJs
vue结合element-ui使用示例
2019/01/24 Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
2019/05/13 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
2019/09/26 Javascript
Vue强制组件重新渲染的方法讨论
2020/02/03 Javascript
JS字符串补全方法padStart()和padEnd()
2020/05/27 Javascript
python2 与 python3 实现共存的方法
2018/07/12 Python
python提取具有某种特定字符串的行数据方法
2018/12/11 Python
纯CSS3实现绘制各种图形实现代码详细整理
2012/12/26 HTML / CSS
逼真的HTML5树叶飘落动画
2016/03/01 HTML / CSS
马来西亚太阳镜、眼镜和隐形眼镜网上商店:Focus Point
2018/12/13 全球购物
英国羊皮鞋类领先品牌:Just Sheepskin
2019/12/12 全球购物
一套SQL笔试题
2016/08/14 面试题
大学生职业生涯规划书范文
2014/01/14 职场文书
交通事故检查书范文
2014/01/30 职场文书
教师工作失职检讨书
2014/09/18 职场文书
党员干部民主生活会议批评与自我批评材料
2014/09/20 职场文书
公司的力量观后感
2015/06/05 职场文书
高三生物教学反思
2016/02/22 职场文书
简单实现一个手持弹幕功能+文字抖动特效
2021/03/31 HTML / CSS
pandas DataFrame.shift()函数的具体使用
2021/05/24 Python
Python中递归以及递归遍历目录详解
2021/10/24 Python