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">
  1. 重写enforceFocus方法:(测试可用)

    保证他能被执行到就行

模态框内部滑动

不使用页面的滚动条
css:给模态框设置overflow-y: hidden;即为取消掉页面滚动条的使用
#HelpModal{margin-top: 95px;height: 300px;overflow-y: hidden;}

添加滚动条,添加滚动条的位置不同效果不同
.modal-content {overflow: auto;max-height:300px;}

html:模态框最外层设置id属性的overflow-y: hidden;,权重值高于自定义的.modal-open .modal类名设置的overflow-y: auto;

select选中跳转

select2选中事件

$(".demo").on("select2:select",function(e){
  console.log(e);
})

**跳转到本页面中指定位置 **
document.getElementById(‘uuuu’).scrollIntoView()
官网select2事件介绍

bootStrap模态框与select2合用时input不能获取焦点、模态框内部滑动,select选中跳转的更多相关文章

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

    在bootstrap的模态框里使用select2插件,会导致select2里的input输入框没有办法获得焦点,没有办法输入. 解决方法: 1. 把页面中的  tabindex="-1&qu ...

  2. bootstrap模态框和select2合用时input无法获取焦点(转)

    在bootstrap的模态框里使用select2插件,会导致select2里的input输入框没有办法获得焦点,没有办法输入. 解决方法: 1. 把页面中的  tabindex="-1&qu ...

  3. Bootstrap modal模态框关闭时,combobox input下拉框仍然保留在页面上

    问题描述: 当点击模态框的关闭按钮时,下拉框中的内容没有消失,而是移动到了页面左上角 分析:这个问题的定位在于是用的哪种模态框,bootstrap和easyui都可以实现模态框,但是两个方法实现的模态 ...

  4. Bootstrap入门(二十三)JS插件1:模态框

    Bootstrap入门(二十三)JS插件1:模态框 1.静态实例 2.动态实例 3.模态框的尺寸和效果 4.包含表单的模态框 模态框经过了优化,更加灵活,以弹出对话框的形式出现,具有最小和最实用的功能 ...

  5. bootstrap3中select2的默认值和下拉框的禁用

    最近做项目用到了select2插件,需求中需要给下拉框设置默认值之后,禁用下拉框,我开始的写法是这样的 <script type="text/javascript"> ...

  6. html5与js关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的value点击全选状态onclick="select();"。做购物车页面时会要用到。

    关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的点击全选状态onclick="s ...

  7. Bootstrap入门(三十)JS插件7:警告框

    Bootstrap入门(三十)JS插件7:警告框 通过这个插件可以为警告信息添加点击以及消失的功能. 当使用一个.close按钮,它必须是第一个子元素.alert-dismissible,并没有文字内 ...

  8. html中如何修改选中 用input做的搜索框 的边框颜色

    html中如何修改选中 用input做的搜索框 的边框颜色 如图,当我鼠标选中输入框时,内边框会变成蓝色 我的问题是: 1.如何把蓝色去掉? 2.如何改成别的颜色? 首先感谢 UI设计师提出的需求,解 ...

  9. input标签(单选框和复选框)

    单选框: <form> <input type="radio" name="..." value="..." checke ...

随机推荐

  1. 关于如何在mysql中插入一条数据后,返回这条数据的id

    简单的总结一下如何在mysql中出入一条数据后,返回该条数据的id ,假如之后代码需要这个id,这样做起来就变得非常方便,内容如下: <insert id="insertAndGetI ...

  2. Unittest方法 -- 以test开头实例

    此篇是以下面的test作为实战的 : Unittest方法 -- 项目实现自动发送邮件 1.test_01 import unittestfrom selenium import webdriverc ...

  3. MySQL -- 表联结

    创建联结:(使用WHERE联结)SELECTvend_name,prod_name,prod_priceFROMvendors,productsWHEREvendors.vend_id=product ...

  4. Cookie学习总结

    Cookie简述 1. 概念 一种客户端会话技术,可以将一些少量的数据保存在客户端. 2. 快速使用 步骤 创建cookie对象,并设定数据 new Cookie(String name, Strin ...

  5. 开源百宝箱《HelloGitHub》第 64 期

    兴趣是最好的老师,HelloGitHub 让你对编程感兴趣! 简介 分享 GitHub 上有趣.入门级的开源项目. HelloGitHub 有实战.教程.黑科技.开源书籍.企业级开源项目,涵盖多种编程 ...

  6. 使用turtle库画一朵玫瑰花带文字

    参考链接:https://jingyan.baidu.com/article/d169e18689f309026611d8c8.html https://blog.csdn.net/weixin_41 ...

  7. Vue项目发布的问题--http://localhost:8088/static/fonts/fontawesome-webfont.af7ae50.woff2

    问题:ngnix将8080转成80对外访问,找不对woff2等文件 一\ 搭建环境 ngnix-->conf中 server { listen 80; server_name 10.9.240. ...

  8. .net core连接Liunx上MS SQL Server

    场景 由于业务要求,需要对甲方的一个在SQL Server上的财务表进行插入操作.研究了半天,因为一个小问题折腾了很久. 过程 .net core端: 1. 利用EF,就需要的导入相关的Nuget包, ...

  9. Adobe ColdFusion 文件读取漏洞(CVE-2010-2861)

    影响范围 Adobe ColdFusion 8.9版本中存在一处目录穿越漏洞 poc http://192.168.49.2:8500/CFIDE/administrator/enter.cfm?lo ...

  10. vulnhub-DC:7靶机渗透记录

    准备工作 在vulnhub官网下载DC:7靶机DC: 7 ~ VulnHub 导入到vmware,设置成NAT模式 打开kali准备进行渗透(ip:192.168.200.6) 信息收集 已经知道了靶 ...