以前看不少的網站說這個光標錯位在頁面有固定定位的時候會出現這種問題,關鍵是個人這個頁面裏面根本就沒有固定定位的元素出現,要不是測試在頁面上上下快速滑動我還不是到有這個問題,個人解決辦法是在頁面滑動的時候讓頁面全部的input標籤失去焦點,代碼以下:html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
body{
height: 2000px;
}
input{
display: block;
margin-bottom: 50px;
}
</style>
</head>
<body>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<script>
var aInp = document.querySelectorAll("input");
var ainpL = aInp.length;
var startY;
document.addEventListener("touchstart",function(e){
startY = e.changedTouches[0].pageY;
});
document.addEventListener("touchmove",function(e){
var chaY = e.changedTouches[0].pageY - startY;
if(Math.abs(chaY) >= 5){
for(var i = 0;i<ainpL;i++){
aInp[i].blur();
}
}
});
</script>
</body>
</html>測試
目前也就想到這種,不知道有沒有其餘更好的方法,不過出現這種狀況的緣由尚未找到。網站