出现场景:IOS端,在弹出层点击input时调起键盘页面会被顶上去document.body.scrollOffset大于0,收起键盘时scrollOffset不变,造成焦点错位。
注:安卓手机点击时调起键盘不会把页面顶上去,会改变窗口高度变化,收起时不会造成影响。
jq处理:
1 $('input').on('blur', function (event) { 2 if (!(event.relatedTarget && event.relatedTarget.tagName)) document.body.scrollTop = 0; 3 });
vue处理:
1、判断移动端设备
1 //判断 IOS 或者 Android 2 let u = window.navigator.userAgent; 3 //IOS终端 4 let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); 5 //android终端 6 let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; 7 //IOS 8 if(isiOS) return "IOS"; 9 //Android 10 if(isAndroid) return "Android";
2、回归原本高度
1 let type = "当前机型";//Android or IOS 2 let isReset = true;//是否归为 3 if (type === 'IOS') { 4 document.body.addEventListener('focusin', () => { 5 //软键盘弹出的事件处理 6 isReset = false; 7 }); 8 document.body.addEventListener('focusout', () => { 9 //软键盘收起的事件处理 10 isReset = true; 11 setTimeout(() => { 12 //当焦点在弹出层的输入框之间切换时先不归位 13 if (isReset) window.scroll(0, 0);//失焦后强制让页面归位 14 }, 100); 15 }); 16 } else if (type === 'Android') { 17 window.onresize = function () { 18 //键盘弹起与隐藏都会引起窗口的高度发生变化 19 let resizeHeight = document.documentElement.clientHeight || document.body.clientHeight; 20 if (resizeHeight < h) isReset = false; 21 else { 22 isReset = true; 23 setTimeout(() => { 24 if (isReset) window.scroll(0, 0);//失焦后让页面归位 25 }, 100); 26 } 27 } 28 }