bootstrap模态框和select2合用时input无法获取焦点

更多内容： http://blog.yuhai.win

参考文献：http://blog.csdn.net/fireofjava/article/details/48414207
http://www.voidcn.com/blog/ynwso/article/p-296035.html

当bootstrap 模态框和select2配合使用的时候或出现 input 无法获取焦点的问题

产生的原因：

Bootstrap registers a listener to the focusin event which checks whether the focused
element is either the overlay itself or a descendent of it - if not it just refocuses on
the overlay. With the select2 dropdown being attached to the body this effectively
prevents you from entering anything into the the textfield.You can quickfix this by overwriting the enforceFocus function which registersthe event on the modal

解决办法：


我这次解决的办法就是把tabindex="-1"去掉就可以了

其他的解决办法：

<script>$(document).ready(function() {$("#select2insidemodal").select2({dropdownParent: "#myModal"});
});</script>

bootstrap模态框和select2合用时input无法获取焦点相关推荐

Bootstrap 模态框（Modal）
#Bootstrap 模态框(Modal)插件详细讲解 #####第一步: 加载框架: https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jque ...
bootstrap 模态框弹出就消失了_bootstrap模态框消失问题的解决方法
这篇文章主要为大家详细整理了bootstrap模态框消失不消失各种问题的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下小编主要从网上整理了网友提出来的关于bootstrap模态框消失的不 ...
Bootstrap模态框里再弹模态框
Bootstrap模态框里再弹模态框后端代码点击编辑按钮将参数赋值隐藏 input 中 , 便于修改获取对应id 修改模态框详情模态框后端代码 /*** 财务审核使用详情** @par ...
Bootstrap模态框使用WebUploader点击失效问题解决
Bootstrap模态框使用WebUploader点击失效问题解决参考文章: (1)Bootstrap模态框使用WebUploader点击失效问题解决 (2)https://www.cnblogs. ...
bootstrap 模态框满屏_如何设置Bootstrap模态框modal的高度和宽度?
以下图片是Bootstrap4模态框默认大小,一般情况Bootstrap模态框有两个默认大小,一个是"modal-sm" 小模态框,一个是"modal-lg"大 ...
bootstrap 模态框满屏_解决Ueditor在bootstarp 模态框中全屏问题
基本的一些配置就不说了.先说一下要注意的问题:首先是zIndex的设置.记住最好都显示设置模态框和ueditor的zIndex.理清他们的层叠关系. 特别是用到ueditor里面的图片上传功能的更要设 ...
前端之bootstrap模态框
简介:模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. Modal简介 Modal实现弹出表单 M ...
html遮罩层模态提示,页面遮罩层，并且阻止页面body滚动。bootstrap模态框原理，.bootstrap模态...
页面遮罩层,并且阻止页面body滚动.bootstrap模态框原理,.bootstrap模态实现思路: 1.需要有一个层将body遮住,放在body上方. 2.修改body的overflow属性值为 ...
bootstrap模态框垂直居中显示
在用bootstrap模态框时,特别是小尺寸的模态框时,其显示位置接近屏幕顶端,在网上查找之后,找到了让模态框居中显示的实现.代码如下 function centerModals(){$('.moda ...
Bootstrap 模态框插件Modal 的事件
事件 Bootstrap模态框插件modal提供了 4 个事件,通过监听这些事件,可以对特定操作阶段的用户行为作出响应.这些事件及含义见表 5‑2. 表 5‑2 Bootstrap模态框插件modal ...

bootstrap模态框和select2合用时input无法获取焦点

bootstrap模态框和select2合用时input无法获取焦点相关推荐

最新文章

热门文章