以前看不少的网站说这个光标错位在页面有固定定位的时候会出现这种问题,关键是个人这个页面里面根本就没有固定定位的元素出现,要不是测试在页面上上下快速滑动我还不是到有这个问题,个人解决办法是在页面滑动的时候让页面全部的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>测试
目前也就想到这种,不知道有没有其余更好的方法,不过出现这种状况的缘由尚未找到。网站