ios11及以上系统下 当fixed和input一起使用时,点击input,光标错位问题解决(一般会在input框偏下)

前端之家收集整理的这篇文章主要介绍了ios11及以上系统下 当fixed和input一起使用时,点击input,光标错位问题解决(一般会在input框偏下)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

自从进了公司以后都好久没写文章笔记了,现在重新开始,我会在segmentfault中记录一些开发中碰到的问题的解决方法,然后在简书中记录一些个人感想。

废话不多说,下面进入重点。

一.图示问题

由于我遇到的问题,光标太偏下,截图效果不佳,这里借助 "Mary哎呀小龙" 的图片 这里是

图示问题

小龙同学的回答也很详细,大家也可以参考下,我利用另外一种方法进行解决

二.问题描述

当fixed和input一起使用时,点击input,光标错位(一般会在input框偏下)。

这里除了这个问题,还有一个问题,弹出表单后,遮罩层后面的页面还能够随我们的滑动而滑动。

经过实际测试,只有在ios11及以上系统时,才会出现这个问题

不过fixed在移动端上也确实是个坑,特别是ios上面,会出现各种各样的问题,上次还遇到例如 返回顶部 按钮,用了fixed,结果整个页面无法滑动,固定在进入时的可视区域。

所以在移动端,不到万不得已还是不要用fixed的好

三.解决方法

解决方法就是弹出表单时给body加一个高度,这个高度等于设备可视区的高度,就能够解决上面说的两个问题

俗话说 「Talk is cheap. Show me the code」

弹出表单时
var h = $(window).height(); 
$("body,html").css({"overflow":"hidden","height":h+"px"});
当然别忘了,关闭表单时,使高度恢复原样
$("body,html").css({"overflow":"auto","height":"auto"}); 

缺点

这个方法虽然解决了以上两个问题,但是还是会有些瑕疵,当弹出表单时页面会回到最顶部。

猜你在找的程序笔记相关文章