ios下遇到的input光标错位

最新推荐文章于 2020-07-20 10:41:46 发布

weixin_34355559

最新推荐文章于 2020-07-20 10:41:46 发布

阅读量276

点赞数

文章标签： python

原文链接：https://my.oschina.net/u/1865746/blog/1575082

版权

2019独角兽企业重金招聘Python工程师标准>>>

之前看很多的网站说这个光标错位在页面有固定定位的时候会出现这种问题，关键是我的这个页面里面根本就没有固定定位的元素出现，要不是测试在页面上上下快速滑动我还不是到有这个问题，我的解决办法是在页面滑动的时候让页面所有的input标签失去焦点，代码如下:

<!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>