修复IOS上滑动HTML界面光标乱跳_光标会固定在屏幕上,不会随着html标签滚动-CSDN博客

本文链接：https://blog.csdn.net/qq_33571718/article/details/83512247

最近测试人员在测试公司开发的IOS应用时候,IOS是使用混合模式开发，当HTML界面有输入框的时候，点击输入后，滑动界面，光标会固定在屏幕上，不会随着HTML标签滚动；会出现错位，截图如下：

网上说，是因为使用了fixed定位的原因，关键是我所有css样式中都没有使用fixed定位；所以，只能通过其他路径解决问题；

多次测试发现，在我们手指移动到combox，等不能聚焦的标签上，键盘会消失，光标自然就不在了，而且不影响滑动；尝试一下，修改代码添加事件：

   document.body.addEventListener('touchstart', function (e) {
        if(document.activeElement)
            document.activeElement.blur();
    }, {passive: false});

测试，光标确实在滑动时不见了，但是每次我点击其它可输入的标签时，光标都会隐藏，键盘收起；这不是想要的效果，因为这样虽然解决了样式的问题，但是会给用户照成使用不便的问题；然后修改事件toushstart->touchmove:

   document.body.addEventListener('touchmove', function (e) {
        if(document.activeElement)
            document.activeElement.blur();
    }, {passive: false});

测试，滑动时光标不会出现错位，而是直接隐藏；点击其它输入框时，光标直接定位到输入框，键盘也不会收起；问题解决，唯一有一点小瑕疵，点击其它输入框时，光标响应速度有点慢，在考虑是否需要加入FastClick这个Js库，如果加入的话，下一篇文章会说明