ios11及以上系统下 当fixed和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"}); 

缺点

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!