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 相关文章推荐
javascript XMLHttpRequest对象全面剖析
Apr 24 Javascript
一个简单的Ext.XTemplate的实例代码
Mar 18 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
Jun 24 Javascript
js 操作select与option(示例讲解)
Dec 20 Javascript
获取当前点击按钮的id用this.id实现
Mar 17 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
Jun 05 Javascript
JavaScript声明变量名的语法规则
Jul 10 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
Dec 07 Javascript
详解Vue使用 vue-cli 搭建项目
Apr 20 Javascript
Js中将Long转换成日期格式的实现方法
Jun 05 Javascript
原生js+ajax分页组件
Jan 30 Javascript
js 计算月/周的第一天和最后一天代码
Feb 01 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
玛琪朵 Macchiato
2021/03/03 咖啡文化
一个用php实现的获取URL信息的类
2007/01/02 PHP
PHP中运用jQuery的Ajax跨域调用实现代码
2012/02/21 PHP
Thinkphp中的volist标签用法简介
2014/06/18 PHP
PHP实现的随机IP函数【国内IP段】
2016/07/20 PHP
php使用preg_match()函数验证ip地址的方法
2017/01/07 PHP
javascript 函数使用说明
2010/04/07 Javascript
JavaScript将字符串转换成字符编码列表的方法
2015/03/19 Javascript
js制作可以延时消失的菜单
2017/01/13 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
2017/07/02 Javascript
vue父组件向子组件(props)传递数据的方法
2018/01/02 Javascript
vue的安装及element组件的安装方法
2018/03/09 Javascript
小程序云开发获取不到数据库记录的解决方法
2019/05/18 Javascript
Vue开发中遇到的跨域问题及解决方法
2020/02/11 Javascript
JavaScript观察者模式原理与用法实例详解
2020/03/10 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
2020/03/29 Javascript
[01:02:18]VGJ.S vs infamous Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
在Django中限制已登录用户的访问的方法
2015/07/23 Python
python 判断是否为正小数和正整数的实例
2017/07/23 Python
Python编程之变量赋值操作实例分析
2017/07/24 Python
python flask实现分页的示例代码
2018/08/02 Python
django云端留言板实例详解
2019/07/22 Python
python Matplotlib底图中鼠标滑过显示隐藏内容的实例代码
2019/07/31 Python
pytorch中的embedding词向量的使用方法
2019/08/18 Python
Django1.11配合uni-app发起微信支付的实现
2019/10/12 Python
Deichmann英国:德国鞋类零售商
2021/01/30 全球购物
10条PHP编程习惯
2014/05/26 面试题
如何将整数int转换成字串String
2014/03/21 面试题
学院领导推荐信
2013/10/30 职场文书
《世界多美呀》教学反思
2014/03/02 职场文书
分家协议书
2014/04/21 职场文书
单位工作证明范文
2014/09/14 职场文书
2015年七一建党节活动方案
2015/05/05 职场文书
MySQL系列之十二 备份与恢复
2021/07/02 MySQL
新手初学Java网络编程
2021/07/07 Java/Android
win11系统中dhcp服务异常什么意思? Win11 DHCP服务异常修复方法
2022/04/08 数码科技