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

最近测试人员在测试公司开发的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库，如果加入的话，下一篇文章会说明

修复IOS上滑动HTML界面光标乱跳相关推荐

解决页面使用overflow: scroll在iOS上滑动卡顿的问题
解决页面使用overflow: scroll在iOS上滑动卡顿的问题参考文章: (1)解决页面使用overflow: scroll在iOS上滑动卡顿的问题 (2)https://www.cnblog ...
myeclipse编辑jsp页面时光标乱跳
大家这两天在使用myeclipse是有不少人碰到鼠标乱跳的问题吧,找了几个方法,大家试试看吧方法1:打开window--Preferences--MyEclipse--Files and Edito ...
ios 平滑移动view_解决页面使用overflow: scroll在iOS上滑动卡顿的问题
最近的一次开发中,使用到了overflow:scroll 属性来滑动div. 如果你对某个div或模块使用了overflow: scroll属性,在iOS系统的手机上浏览时,则会出现明显的卡顿现象. ...
苹果手机input光标乱跳慢慢滑动会从底层漏出来
百度结果大家都说是固定定位fixed 引起的更改成绝对定位就可以解决 ,首先我调整了下被穿透的两个盒子的z-index值 ,但是并没有解决问题代码里使用的也是相对定位所以不是fixed引起的 ...
针对Office2013专业版，光标乱跳的问题的解决
如题,该问题为office的bug,需打KB2863845补丁,可通过以下地址https://support.microsoft.com/zh-cn/hotfix/kbhotfix?kbnum=286 ...
纯css隐藏移动端滚动条解决方案（ios上流畅滑动）
html代码展示(直接复制代码保存至本地文件运行即可): <!DOCTYPE html> <html lang="en"><head><m ...
vux scroller在iOS上，一停止滑动就跳到顶部
vux scroller在iOS上滑动列表,滑完就会跳到顶部,然后去查了下vux的文档,没有解决办法,百度了一大堆,也没有相关问题,只能看下源码到底是哪除了问题. 经过一层层的查找,终于发现是ios1 ...
java指针乱跳_鼠标卡顿，指针乱跳，鼠标失灵的解决办法。涨知识了
你是否经历过,鼠标卡顿,屏幕上指针乱跳,指针消失,等等鼠标失灵的窘境呢?那就跟着LZ来看看原因和解决办法. 工具/材料只需要一颗好奇平静的心即可. 操作方法 01 现象1:鼠标卡顿.其表现是,经常无 ...
地磅称重管理电脑鼠标乱跳的解决方案
地磅称重管理电脑鼠标乱跳的解决方案仪表开机时,仪表与电脑的RS232通信是连续发送数据;计算机在开机过程中,开始检测有连接的硬件设计,从串口中有接收到数据,计算机会错误的认为所连接的数据为一个串口以 ...
iphone smtp服务器没有响应,电子邮件卡在iPhone或iPad上的发件箱？如何修复iOS中的未发送邮件 | MOS86...
您曾经在iOS中发送电子邮件,只能将信息卡在iPhone,iPad或iPod touch的邮件应用发件箱中?你知道这是什么时候发生的,因为在iOS的Mail应用程序的底部,状态栏在iOS中显示1个未发 ...

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

修复IOS上滑动HTML界面光标乱跳相关推荐

最新文章

热门文章