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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值