移动端,由页面定位的滚动区域引起光标可以跟页面滑动
Posted Xpress
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端,由页面定位的滚动区域引起光标可以跟页面滑动相关的知识,希望对你有一定的参考价值。
var isIPHONE = navigator.userAgent.toUpperCase().indexOf(\'IPHONE\')!= -1; // 元素失去焦点隐藏iphone的软键盘 function objBlur(obj,time){ var that; // if(typeof id != \'string\') throw new Error(\'objBlur()参数错误\'); time = time || 100, docTouchend = function(event){ if(event.target!= obj){ setTimeout(function(){ if (typeof($(event.target).attr("readonly"))!=="undefined") { obj[that].blur(); document.removeEventListener(\'touchend\', docTouchend,false); return false; } },time); } }; if(obj){ for (var i = 0; i<obj.length; i++) { obj[i].index = i; obj[i].addEventListener(\'focus\', function(){ that = this.index; document.addEventListener(\'touchend\', docTouchend,false); },false); } }else{ throw new Error(\'objBlur()没有找到元素\'); } }
调用:
$(function () { if(isIPHONE){ var obj = document.getElementsByTagName(\'input\'); var input = new objBlur(obj); input=null; } })
说明:焦点在某个input元素上,此时快速滑动页面,由于是absolute定位,光标跟不上滚动的速度。导致错位问题。
解决方案就是在你滑动页面的时候直接让input失去焦点,隐藏光标。这里对测试人员吐槽一下:尼玛,好好的表单你不填,你非要滑动页面玩,XX。。。
不过话说回来,要不是测试员奇葩,我也不会学到更多东西,嘻嘻!还是非常感谢的!Bugs,come on!! 测试→
以上是关于移动端,由页面定位的滚动区域引起光标可以跟页面滑动的主要内容,如果未能解决你的问题,请参考以下文章
解决ios移动端,滑动回弹效果遮挡页面顶部和底部Fixed元素的问题