H5页面移动端IOS键盘收起焦点错位

出现场景：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