一个菜鸟的互联网技术分享博客
您的位置: 主页 > 使用boostrap框架里的模态框时出现input无法获取焦
advertisement

使用boostrap框架里的模态框时出现input无法获取焦

方法一:

重写 bootstrap 的focus 方法
$(document).ready(function(){
    $.fn.modal.Constructor.prototype.enforceFocus = function() {
       $("#form").focus();
    };
})

这种方式有个缺点就是模态框加载时某一个组件只能获取焦点,再次点击就不能获取焦点了。


方法二:

去除模态框的 tabindex="-1" 属性即可,这样就可以使模态框中的表单或者input获得焦点。

方式三:

模态框的样式被其他层遮盖了,这种方式导致的就是整个页面都无法点击。解决方式就是F12查看模态框的CSS样式。取消某个样式来判断被那个样式所遮盖。

方法四:

在写样式时候某个部分加了“font-size:0;”这个属性(由于本人不喜欢用浮动,喜欢用display;inline-block,这个属性的影响用过的人都知道,就是要给它的父元素加font-size:0;不然盒子之间是有间距的),去除这个属性即可。

zhangren.online
上一篇:没有了
下一篇:jQuery如何解决相同class名下相同的p标签点击淡入

您可能喜欢

​js中的深浅拷贝问题简析

​js中的深浅拷贝问题简析

​boostrap之模态框取消按钮事件

​boostrap之模态框取消按钮事件

​Js中获取对象的所有key值

​Js中获取对象的所有key值

​解决一个页面多个enter事件的混乱

​解决一个页面多个enter事件的混乱

​vue使用rem,实现移动端适配

​vue使用rem,实现移动端适配

回到顶部