ios11弹出层上input输入框光标移位问题

ios11弹出层上input输入框光标移位问题

需求是这样的，用户点击页面上的按钮弹出浮层，浮层上有两个输入框，分别输入用户名，手机号等信息，然后点击报名，浮层用的fixed定位。本来一切都好，但在真机上测试时...what???在ios11下，浮层上input框的光标乱的一塌糊涂。

于是上网查询得知ios11系统的苹果机用户在点击输入框，出现键盘后，弹出层被顶上去，而光标还停留在原处，即出现错位情况，并得到如下方法：

1，方案一：有人说把弹出层设置为position: absolute；body添加position: fixed;然后获取滚动条高度，设置为弹出层的Top值。貌似美滋滋，但是一旦弹出层Top属性被赋值，页面会默认回到最顶端，用户体验感极差。

2，方案二：弹出层仍然为position: fixe,弹框弹出时给body添加position: fixed;获取滚动条高度

H=$(window).scrollTop();
复制代码

弹框关闭时

$("body").scrollTop(H);
复制代码

这样用户在关闭弹窗后，页面还在原来浏览的位置，并且解决了光标乱掉的问题；但是在弹框弹出的一瞬间，透过阴影浮层能看到底下页面还是回到了顶部，那弹框弹出的时候也给body一个scollTop吗？然而并没有用。

3，方案三：弹出层仍然为position: fixe,但弹框弹出时，设置body和html的样式为：

$("html,body").css({
    "width": "100%",
    "height": "100%",
    "overflow": "hidden", 
    "position": "fixed"
})
复制代码

获取滚动条高度

H=$(window).scrollTop();
复制代码

给到body

$("body").scrollTop(H);
复制代码

弹框关闭时：

$("html,body").css({
    "width": "auto",
    "height": "auto",
    "overflow": "auto", 
    "position": "static"
})
复制代码

把刚才获取的滚动条高度(注意不是重新获取)同样给到body。光标问题解决，并且页面也不乱跑了！

PS：1，有人说采取阻止页面的touchmove事件来实现固定底部页面的想法，试了下，效果不太好，并没有采用。2，光标还有一些小问题，就是点第一次不出现，但能正常输入，点第二次才出现，目前不知是什么原因，为了用户体验，给input加了事件，就是获取焦点时边框变色用来提示用户。