修复IOS上滑动HTML界面光标乱跳

秒速五厘米 2022-05-15 14:18 350阅读 0赞

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNTcxNzE4_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNTcxNzE4_size_16_color_FFFFFF_t_70 1][]

网上说，是因为使用了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库，如果加入的话，下一篇文章会说明

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNTcxNzE4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20181029202020855.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNTcxNzE4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNTcxNzE4_size_16_color_FFFFFF_t_70 1]: /images/20220503/764ad8786118491d80c1432f39f4f46f.png