Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法


Posted in Javascript onDecember 13, 2016

Bootstrap 弹出框modal上层的输入框不能获得焦点问题,具体内容如下

1.在使用Bootstrap框架中目前modal弹出框只支持一层

即在当前弹出框上不能再使用modal弹出框。
如果使用自定义的弹出框,例如:http://my.oschina.net/tianma3798/blog/737232
如果自定义弹出框中有input输入框,如果input 输入框不能获得焦点,则可能原因如下:
许多使用定义弹出层

<div class="modal fade" tabindex="0" role="dialog" id="myModal" data-backdrop="static"> 
 <div class="modal-dialog modal-lg"> 
  <div class="modal-content"> 
  <div class="modal-header"> 
   <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> 
   <h4 class="modal-title" id="myModalLabel">添加学校</h4> 
  </div> 
  <div class="modal-body"> 
   <form class="form-horizontal" name="myForm" novalidate> 
   <input type="hidden" ng-model="entity.SchID" /> 
   <div class="form-group"> 
    <label for="SchName" class="col-sm-2 control-label">学校名称:</label> 
    <div class="col-sm-10"> 
    <input type="text" required ng-minlength="3" ng-maxlength="30" 
     class="form-control" 
     ng-model="entity.SchName" name="SchName" placeholder="长度3-30"> 
    <span class="text-danger" ng-show="myForm.SchName.$dirty && myForm.SchName.$invalid"> 
     <span ng-show="myForm.SchName.$error.required">名称是必须的</span> 
     <span ng-show="myForm.SchName.$error.minlength">最小长度3</span> 
     <span ng-show="myForm.SchName.$error.maxlength">最大长度30</span> 
    </span> 
    </div> 
   </div> 
 
   <div class="form-group"> 
    <label for="WebSite" class="col-sm-2 control-label">学校官网:</label> 
    <div class="col-sm-10"> 
    <input required type="url" class="form-control" ng-model="entity.WebSite" name="WebSite" 
     placeholder="链接地址" /> 
    <span class="text-danger" ng-show="myForm.WebSite.$dirty && myForm.WebSite.$invalid"> 
     <span ng-show="myForm.WebSite.$error.required">姓名是必须的</span> 
     <span ng-show="myForm.WebSite.$error.url">链接格式不正确</span> 
    </span> 
    </div> 
   </div> 
 
   <div class="form-group"> 
    <label for="FoundTime" class="col-sm-2 control-label">建校时间:</label> 
    <div class="col-sm-10"> 
    <input required type="number" class="form-control" ng-model="entity.FoundTime" name="FoundTime" 
     placeholder="年份" /> 
    <span class="text-danger" ng-show="myForm.FoundTime.$dirty && myForm.FoundTime.$invalid"> 
     <span ng-show="myForm.Summary.$error.required">姓名是必须的</span> 
     <span ng-show="myForm.Summary.$error.number">请输入数字(年份)</span> 
    </span> 
    </div> 
   </div> 
   <div class="form-group"> 
    <label class="col-sm-2 control-label">入学时间:</label> 
    <div class="col-sm-10"> 
    <div class="selectBox" id="selectMonth"></div> 
    <input type="hidden" name="Province" ng-model="entity.MonthList" /> 
    </div> 
   </div> 
   </form> 
  </div> 
  <div class="modal-footer"> 
   <button type="button" class="btn btn-success" ng-disabled="myForm.$invalid" ng-click="addOrUpdate()">保存</button> 
   <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> 
  </div> 
  </div> 
 </div> 
 </div>

解决方式是去掉 tabindex="0" 属性,然后就可以获得焦点了

<div class="modal fade" role="dialog" id="myModal" data-backdrop="static"> 

Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery判断数组是否包含了指定的元素
Mar 10 Javascript
jQuery解决input超多的表单提交
Aug 10 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
Aug 31 Javascript
JS动态插入并立即执行回调函数的方法
Apr 21 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
May 13 Javascript
JavaScript实现定时页面跳转功能示例
Feb 14 Javascript
详解使用Next.js构建服务端渲染应用
Jul 10 Javascript
vue中使用protobuf的过程记录
Oct 26 Javascript
利用原生JavaScript实现造日历轮子实例代码
May 08 Javascript
vue 获取及修改store.js里的公共变量实例
Nov 06 Javascript
vue2路由基本用法实例分析
Mar 06 Javascript
vue 在methods中调用mounted的实现操作
Aug 07 Javascript
深入理解选择框脚本[推荐]
Dec 13 #Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
Dec 13 #Javascript
Bootstrap modal使用及点击外部不消失的解决方法
Dec 13 #Javascript
jQuery 获取select选中值及清除选中状态
Dec 13 #Javascript
Bootstrap3 datetimepicker控件使用实例
Dec 13 #Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
Dec 13 #Javascript
jQuery Easyui datagrid连续发送两次请求问题
Dec 13 #Javascript
You might like
用PHP和ACCESS写聊天室(八)
2006/10/09 PHP
使用php+apc实现上传进度条且在IE7下不显示的问题解决方法
2013/04/25 PHP
php中__destruct与register_shutdown_function执行的先后顺序问题
2014/10/17 PHP
CodeIgniter多语言实现方法详解
2016/01/20 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
了解jQuery技巧来提高你的代码
2010/01/08 Javascript
基于jQuery选择器的整理集合
2013/04/26 Javascript
javascript full screen 全屏显示页面元素的方法
2013/09/27 Javascript
简单的Jquery遮罩层代码实例
2013/11/14 Javascript
jQuery中delegate和on的用法与区别详细解析
2014/01/26 Javascript
控制input输入框中提示信息的显示和隐藏的方法
2014/02/12 Javascript
JavaScript参数个数可变的函数举例说明
2014/10/10 Javascript
js实现点击图片改变页面背景图的方法
2015/02/28 Javascript
javascript委托(Delegate)blur和focus用法实例分析
2015/05/26 Javascript
基于JavaScript实现本地图片预览
2017/02/08 Javascript
详解用vue.js和laravel实现微信授权登陆
2017/06/23 Javascript
解决vue中对象属性改变视图不更新的问题
2018/02/23 Javascript
vue多次循环操作示例
2019/02/08 Javascript
vue 修改 data 数据问题并实时显示操作
2020/09/07 Javascript
python列表操作之extend和append的区别实例分析
2015/07/28 Python
使用Python的Django和layim实现即时通讯的方法
2018/05/25 Python
python中join()方法介绍
2018/10/11 Python
Python中单线程、多线程和多进程的效率对比实验实例
2019/05/14 Python
在notepad++中实现直接运行python代码
2019/12/18 Python
解决pytorch报错:AssertionError: Invalid device id的问题
2020/01/10 Python
python 3.8.3 安装配置图文教程
2020/05/21 Python
python学习笔记之多进程
2020/08/06 Python
详解使用Python写一个向数据库填充数据的小工具(推荐)
2020/09/11 Python
HTML5 device access 设备访问详解
2018/05/24 HTML / CSS
世界上最大的巴士旅游观光公司:Big Bus Tours
2016/10/20 全球购物
美国购买当代和现代家具网站:MODTEMPO
2018/07/20 全球购物
澳大利亚100%丝绸多彩度假装商店:TheSwankStore
2019/09/04 全球购物
知识就是力量演讲稿
2014/09/13 职场文书
2014年中班下学期工作总结
2014/12/11 职场文书
决心书格式范文
2015/09/23 职场文书
Vue实现下拉加载更多
2021/05/09 Vue.js