移动端,由页面定位的滚动区域引起光标可以跟页面滑动
2016-11-01 16:27
711 查看
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!! 测试→
相关文章推荐
- 微信开发安卓页面出现两个滚动条其中一条无法滚动可以采用局部区域滚动解决
- Android实现了复杂表格,表格内容区域可以与上下滑动、左右滚动,并且标题会跟着滚动
- 手机端左右滑动,不用写js(只有页面切换到移动端可以看)
- 移动端页面滑动,菜单到顶部之后定位在顶部(position: sticky;)
- 提取Launcher中的WorkSapce,可以左右滑动切换屏幕页面的类
- 让框架的整个页面有滚动条,也可以实现其中的任一框架滚动
- js页面滚动时层智能浮动定位实现(jQuery/MooTools)
- 提取Launcher中的WorkSapce,可以左右滑动切换屏幕页面的类
- richtextbox 使用ScrollToCaret()可以将滚动条定位到当前光标处 .
- android-整体UI设计-(滑动导航栏+滚动页面)
- 提取Launcher中的WorkSapce,可以左右滑动切换屏幕页面的类
- MooTools 页面滚动浮动层智能定位实现代码
- 用js实现分享到随页面滚动而滑动效果
- 关于背景图片固定 不会随着页面滚动而变化,及定位注意问题
- 提取Launcher中的WorkSapce,可以左右滑动切换屏幕页面的类
- 页面滚动浮动层智能定位(jQuery)实例页面
- 提取Launcher中的WorkSapce,可以左右滑动切换屏幕页面的类
- 可控制的页面内滚动区域
- winform 中,以编程方式将光标定位到文本框的最后并将滚动条滚动到该位置
- js页面滚动浮动层智能定位(MooTools)实例页面