最近測(cè)試人員在測(cè)試公司開發(fā)的IOS應(yīng)用時(shí)候,IOS是使用混合模式開發(fā)，當(dāng)HTML界面有輸入框的時(shí)候，點(diǎn)擊輸入后，滑動(dòng)界面，光標(biāo)會(huì)固定在屏幕上，不會(huì)隨著HTML標(biāo)簽滾動(dòng)；會(huì)出現(xiàn)錯(cuò)位，截圖如下：

網(wǎng)上說(shuō)，是因?yàn)槭褂昧薴ixed定位的原因，關(guān)鍵是我所有css樣式中都沒(méi)有使用fixed定位；所以，只能通過(guò)其他路徑解決問(wèn)題；

多次測(cè)試發(fā)現(xiàn)，在我們手指移動(dòng)到combox，等不能聚焦的標(biāo)簽上，鍵盤會(huì)消失，光標(biāo)自然就不在了，而且不影響滑動(dòng)；嘗試一下，修改代碼添加事件：

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

測(cè)試，光標(biāo)確實(shí)在滑動(dòng)時(shí)不見了，但是每次我點(diǎn)擊其它可輸入的標(biāo)簽時(shí)，光標(biāo)都會(huì)隱藏，鍵盤收起；這不是想要的效果，因?yàn)檫@樣雖然解決了樣式的問(wèn)題，但是會(huì)給用戶照成使用不便的問(wèn)題；然后修改事件toushstart->touchmove:

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

測(cè)試，滑動(dòng)時(shí)光標(biāo)不會(huì)出現(xiàn)錯(cuò)位，而是直接隱藏；點(diǎn)擊其它輸入框時(shí)，光標(biāo)直接定位到輸入框，鍵盤也不會(huì)收起；問(wèn)題解決，唯一有一點(diǎn)小瑕疵，點(diǎn)擊其它輸入框時(shí)，光標(biāo)響應(yīng)速度有點(diǎn)慢，在考慮是否需要加入FastClick這個(gè)Js庫(kù)，如果加入的話，下一篇文章會(huì)說(shuō)明

總結(jié)

以上是生活随笔為你收集整理的修复IOS上滑动HTML界面光标乱跳的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。