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.

 

你可能感兴趣的:(开发感悟)