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

 更新时间:2016年12月13日 14:40:27   作者:天马3798  
这篇文章主要介绍了Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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"> 

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

相关文章

  • 小程序实现单选多选功能

    小程序实现单选多选功能

    这篇文章主要为大家详细介绍了小程序实现单选多选功能,可自定义样式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • javascript数组遍历的方法实例分析

    javascript数组遍历的方法实例分析

    这篇文章主要介绍了javascript数组遍历的方法,结合实例形式分析了javascript数组遍历及相关的some、every、filter、map等方法的使用技巧,需要的朋友可以参考下
    2016-09-09
  • 微信小程序简单的canvas裁剪图片功能详解

    微信小程序简单的canvas裁剪图片功能详解

    这篇文章主要介绍了微信小程序简单的canvas裁剪图片功能详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07
  • js 数值项目的格式化函数代码

    js 数值项目的格式化函数代码

    数值项目的格式化函数代码,需要的朋友可以参考下。
    2010-05-05
  • uni-app微信小程序下拉多选框实例代码

    uni-app微信小程序下拉多选框实例代码

    这篇文章主要给大家介绍了关于uni-app微信小程序下拉多选框的相关资料,在通过uniapp做app开发的时候,有场景需要用到下拉选择框,需要的朋友可以参考下
    2023-08-08
  • js变换显示图片的实例

    js变换显示图片的实例

    题意:在界面上有一张图片,下面有四个单选按钮,点击每一个按钮图片变换成不同的图片
    2013-04-04
  • javascript模拟实现ajax加载框实例

    javascript模拟实现ajax加载框实例

    这篇文章主要介绍了javascript模拟实现ajax加载框的方法,实例简述了其实现过程,方法简单实用,需要的朋友可以参考下
    2014-10-10
  • 基于JavaScript实现的希尔排序算法分析

    基于JavaScript实现的希尔排序算法分析

    这篇文章主要介绍了基于JavaScript实现的希尔排序算法,简单分析了希尔排序的原理并结合实例形式给出了javascript实现希尔排序的操作步骤与相关注意事项,需要的朋友可以参考下
    2017-04-04
  • JS基于开关思想实现的数组去重功能【案例】

    JS基于开关思想实现的数组去重功能【案例】

    这篇文章主要介绍了JS基于开关思想实现的数组去重功能,简单分析了开关思想的原理,并结合具体实例形式分析了javascript基于开关思想实现数组去重相关操作技巧,需要的朋友可以参考下
    2019-02-02
  • JavaScript 中的数据类型Number

    JavaScript 中的数据类型Number

    这篇文章主要介绍了JavaScript 中的数据类型Number,Number 类型使用 IEEE 754 格式表示整数和浮点值,下文相关详细资料介绍,需要的小伙伴可以参考一下
    2022-04-04

最新评论