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加了事件,就是获取焦点时边框变色用来提示用户。