ios h5页面软键盘弹出后造成的触控不准BUG以及其解决方法(貌似只有在微信内置浏览器有这个问题)

在IOS下,点击页面中的input时,弹出软键盘时,如果input比较靠下,整个页面会上移,document.body.scrollOffset会由0变成大于0。 软键盘消失后,页面会下移。但是document.body.scrollTop 并不会变成0,所以这时候触控不准,点击上面的按钮,下面的按钮会有反应,看起来非常古怪。 解决方法很简单,以下代码即可:

 $('textarea,input').on('blur', function (event) {
        if (!(event.relatedTarget && (event.relatedTarget.tagName === 'INPUT' || event.relatedTarget.tagName === 'TEXTAREA')))
            document.body.scrollTop = 0;

//但是后来发现IOS下 document.body.scrollTop总是0, document.documentElement.scrollTop时可用的,或许要换成document.documentElement.scrollTop? 没有测试。


    });

在安卓下,弹出软键盘时,页面会被压小,并不上移,不会出现这个bug.

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值