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 相关文章推荐
Javascript中的数学函数
Apr 04 Javascript
基于jquery的页面划词搜索JS
Sep 14 Javascript
jquery实现文字由下到上循环滚动的实例代码
Aug 09 Javascript
自动设置iframe大小的jQuery代码
Sep 11 Javascript
JavaScript实现Java中StringBuffer的方法
Feb 09 Javascript
jQuery实现表单步骤流程导航代码分享
Aug 28 Javascript
JavaScript中的操作符类型转换示例总结
May 30 Javascript
老生常谈Bootstrap媒体对象
Jul 06 Javascript
VSCode中如何利用d.ts文件进行js智能提示
Apr 13 Javascript
TypeScript中使用getElementXXX()的示例代码
Sep 12 Javascript
JavaScript Reflect Metadata实现详解
Dec 12 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
Jul 22 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 常见郁闷问题答解
2006/11/25 PHP
PHP面试题之文件目录操作
2015/10/15 PHP
php实现批量删除挂马文件及批量替换页面内容完整实例
2016/07/08 PHP
CI框架(CodeIgniter)实现的导入、导出数据操作示例
2018/05/24 PHP
用Javascript 获取页面元素的位置的代码
2009/09/25 Javascript
Web开发者必备的12款超赞jQuery插件
2010/12/03 Javascript
jquery方法+js一般方法+js面向对象方法实现拖拽效果
2012/08/30 Javascript
js替换字符串的所有示例代码
2013/07/23 Javascript
用html+css+js实现的一个简单的图片切换特效
2014/05/28 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
2016/09/13 Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
2016/09/21 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
2016/12/17 Javascript
JS图片压缩(pc端和移动端都适用)
2017/01/12 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
2017/02/21 Javascript
ES5学习教程之Array对象
2017/04/01 Javascript
Vue请求JSON Server服务器数据的实现方法
2018/11/02 Javascript
微信小程序实现动态列表项的顺序加载动画
2019/07/25 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
2019/11/07 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
2020/08/22 Javascript
Python中的下划线详解
2015/06/24 Python
Python简单实现socket信息发送与监听功能示例
2018/01/03 Python
Python+request+unittest实现接口测试框架集成实例
2018/03/16 Python
Python中__slots__属性介绍与基本使用方法
2018/09/05 Python
对IPython交互模式下的退出方法详解
2019/02/16 Python
解决django中ModelForm多表单组合的问题
2019/07/18 Python
python sorted函数的小练习及解答
2019/09/18 Python
国际经济贸易专业推荐信
2013/11/06 职场文书
建筑装饰学院室内设计专业个人自我评价
2013/12/07 职场文书
写给女朋友的道歉信
2014/01/12 职场文书
学员自我鉴定
2014/03/19 职场文书
通信工程专业求职信
2014/06/04 职场文书
公务员处分决定书
2015/06/25 职场文书
小学体育教学随笔
2015/08/14 职场文书
《用字母表示数》教学反思
2016/02/17 职场文书
读鲁迅先生的经典名言
2019/08/20 职场文书
Python初学者必备的文件读写指南
2021/06/23 Python