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 相关文章推荐
prototype 的说明 js类
Sep 07 Javascript
javascript 一个自定义长度的文本自动换行的函数
Aug 19 Javascript
关于document.cookie的使用javascript
Apr 11 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
Feb 26 Javascript
js实现仿爱微网两级导航菜单效果代码
Aug 31 Javascript
基于JQuery打造无缝滚动新闻步骤详解
Mar 31 Javascript
javascript模块化简单解析
Apr 07 Javascript
JavaScript中判断数据类型的方法总结
May 24 Javascript
jQuery 3.0 的 setter和getter 模式详解
Jul 11 Javascript
react native实现往服务器上传网络图片的实例
Aug 07 Javascript
vue引入ueditor及node后台配置详解
Jan 03 Javascript
js+canvas实现简单扫雷小游戏
Jan 22 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
discuz程序的PHP加密函数原理分析
2011/08/05 PHP
php中用于检测一个地理IP地址是否可用的代码
2012/02/19 PHP
利用PHP实现图片等比例放大和缩小的方法详解
2013/06/06 PHP
php时间函数用法分析
2016/05/28 PHP
php中mkdir()函数的权限问题分析
2016/09/24 PHP
PHP实现通过strace定位故障原因的方法
2018/04/29 PHP
克隆javascript对象的三个方法小结
2011/01/12 Javascript
提交表单时执行func方法实现代码
2013/03/17 Javascript
js 左右悬浮对联广告特效代码
2014/12/12 Javascript
javascript中AJAX用法实例分析
2015/01/30 Javascript
js实现鼠标感应图片展示的方法
2015/02/27 Javascript
JS 在数组指定位置插入/删除数据的方法
2017/01/12 Javascript
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
2017/09/21 Javascript
在Vue中使用Compass的方法
2018/03/02 Javascript
微信小程序之自定义组件的实现代码(附源码)
2018/08/02 Javascript
vue模仿网易云音乐的单页面应用
2019/04/24 Javascript
node.JS事件机制与events事件模块的使用方法详解
2020/02/06 Javascript
vue-resource 拦截器interceptors使用详解
2021/01/18 Vue.js
python实现文件路径和url相互转换的方法
2015/07/06 Python
Python argv用法详解
2016/01/08 Python
Python 绘图和可视化详细介绍
2017/02/11 Python
python Selenium实现付费音乐批量下载的实现方法
2019/01/24 Python
在macOS上搭建python环境的实现方法
2019/08/13 Python
python 协程 gevent原理与用法分析
2019/11/22 Python
如何在mac环境中用python处理protobuf
2019/12/25 Python
意大利简约的休闲品牌:Aspesi
2018/02/08 全球购物
Wolford法国官网:奥地利奢侈内衣品牌
2020/08/11 全球购物
英国时尚首饰品牌:Missoma
2020/06/29 全球购物
美术教师岗位职责
2014/03/18 职场文书
本科毕业自我鉴定
2014/03/20 职场文书
房屋所有权证明
2014/10/20 职场文书
乡镇党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
2015年银行信贷员工作总结
2015/05/19 职场文书
2015年城管执法工作总结
2015/07/23 职场文书
2019奶茶店创业计划书范本,值得你借鉴
2019/08/14 职场文书
elementui的el-popover修改样式不生效的解决
2021/06/30 Javascript