出現場景: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 }
轉載于:https://www.cnblogs.com/lyzw-Y/p/10783933.html