bootstrap模态框和select2合用时input无法获取焦点(转)
在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() {};
转发请标注原文地址:http://www.cnblogs.com/dinglinjie/p/7462228.html
阿杰de博客,qq群:112465270
bootstrap模态框和select2合用时input无法获取焦点(转)的更多相关文章
- bootStrap模态框与select2合用时input不能获取焦点、模态框内部滑动,select选中跳转
bootStrap模态框与select2合用时input不能获取焦点 在bootstrap的模态框里使用select2插件,会导致select2里的input输入框没有办法获得焦点,没有办法输入. 把 ...
- bootstrap模态框和select2合用时input无法获取焦点
在bootstrap的模态框里使用select2插件,会导致select2里的input输入框没有办法获得焦点,没有办法输入. 解决方法: 1. 把页面中的 tabindex="-1&qu ...
- select2和bootstrap模态框一起使用导致select2的input获取不到焦点问题
select2和bootstrap模态框一起使用导致select2的input获取不到焦点问题 解决办法: 把页面中的 tabindex="-1" 删掉, 或者值改为1 代码片 ...
- bootstrap模态框input不能获取焦点并编辑【转】
Bootstrap模态框时input标签[日期控件也有这样的问题]不能编辑的问题,下面是我的解决方法: 1.将下图中框出来的属性删掉即可: 2.兼容火狐浏览器,笔者在火狐中还是不能编辑,去掉下图属性即 ...
- 解决display none到display block 渲染时间过长的问题,以及bootstrap模态框导致其他框中input不能获得焦点问题的解决
在做定制页面的时候,遇到这么一个问题,因为弹出框用的是bootstrap的自带的弹出框,控制显示和隐藏也是用自带的属性控制 控制显示,在触发的地方 例如botton上面加上 data-toggle=& ...
- bootstrap 模态框中弹出层 input不能获得焦点且不可编辑
bootstrap 模态框中弹出层 input不能获得焦点且不可编辑 问题描述:bs框架支持一层model层的情况下,在模态框中弹出了自定义的弹出层.发现自定义弹出层的输入框不能获得焦点且不可编辑. ...
- 解决bootstrap模态框内输入框无法获取焦点
bootstrap 模态框中的input标签在某些情况下会无法获取焦点. 最终解决方法:去除模态框的 tabindex="-1" 属性即可
- bootstrap模态框关闭后清除模态框的数据
https://segmentfault.com/q/1010000008789123 bootstrap模态框第二次打开时如何清除之前的数据? 我用了bootstrap模态框的remote功能,在弹 ...
- 第二百四十三节,Bootstrap模态框插件
Bootstrap模态框插件 学习要点: 1.基本使用 2.用法说明 本节课我们主要学习一下 Bootstrap 中的模态框插件,这是一款交互式网站非常常见的 弹窗功能插件. 一.基本使用 使用模态框 ...
随机推荐
- mysql中文乱码归纳总结
今天使用sqlalchemy往mysql数据库里插入数据的时候,发生了错误,因为字段包含中文,所以报错.在问题解决之后做一个总结. mysql中文乱码包括几个方面.mysql服务器层面.mysql ...
- 第五节:web爬虫之urllib(一)
一.urllib.request.urlopen(url, data=None, [timeout, ]*, cafile=None, capath=None, cadefault=False, ...
- Emacs的undo与redo
在Emacs的手册16.1节中有这样一句话, Any command other than an undo command breaks the sequence of undo commands. ...
- 使用Eclipse 创建Spring Boot项目
一.为什么要使用 Spring Boot ? Spring Boot解决的问题 (1) Spring Boot使编码变简单 (2) Spring Boot使配置变简单 (3) Spring Boot使 ...
- [MongoDB]mongo命令行工具
1.use dbname 自动创建 2.db.user.find() 空 show collections 空 show dbs 3.db.user.save({name:'',age:20}) db ...
- 解决Linux ssh登录马上退出问题
纠结了非常久,最终找到解决方法: 把sshd_config文件里的UsePAM改成no就能够了
- maven打包需要设置main-class的插件写法
maven打包需要设置main-class的插件写法 <build> <plugins> <plugin> <groupId>org.apache.ma ...
- 前端project师的价值体如今哪里?
这是一个非常老的话题"前端project师的价值体现在哪里?".有人说:"前端project师之于站点的价值宛如化妆师之于明星的价值."一位好的Web前端开发p ...
- Linux vs Window
目前国内Linux更多的是应用于服务器上,而桌面操作系统更多使用的是Window.主要区别如下: 比较 Windows Linux 界面 界面统一,外壳程序固定所有Windows程序菜单几乎一致,快捷 ...
- linux select函数:Linux下select函数的使用详解【转】
本文转载自;http://www.bkjia.com/article/28216.html Linux下select函数的使用 Linux下select函数的使用 一.Select 函数详细介绍 Se ...