软键盘将页面顶起来、收起未回落问题

朱雀 2022-11-27 07:21 106阅读 0赞

**监听input失焦blur（IOS）**

**　**　因为ios的第三方键盘可能并不会导致window resize，所以不能用resize监听，但是可以通过输入框是否获取焦点来判断； （在android中，点击键盘上的收起按钮，键盘虽然收起了，输入框仍然处于焦点状态，并没有触发focusout事件）

focusin和focusout支持冒泡，对应focus和blur, 使用focusin和focusout的原因是focusin和focusout可以冒泡，focus和blur不会冒泡，这样就可以使用事件代理，处理多个输入框存在的情况。（这个视情况而定）

这里亲自的：

当input 失去焦点的时候执行
    
    解决方法：
    
    document.body.addEventListener('focusout', function () {
            window.scrollTo(0,0);
    })
    
    最简单：(vue的)
    //input失去焦点
    loseblur() {
       window.scrollTo(0, 0)
    },

下面是网上普遍的解决。

链接：https://zhuanlan.zhihu.com/p/181212066 H5常见问题及解决方案

[https://juejin.im/post/6844904126388797448][https_juejin.im_post_6844904126388797448] H5常见问题及解决方案

**软键盘将页面顶起来、收起未回落问题**

**表现**

Android 手机中，点击 `input` 框时，键盘弹出，将页面顶起来，导致页面样式错乱。

移开焦点时，键盘收起，键盘区域空白，未回落。

### **产生原因** ###

我们在app 布局中会有个固定的底部。安卓一些版本中，输入弹窗出来，会将解压 `absolute` 和 `fixed` 定位的元素。导致可视区域变小，布局错乱。

### **原理与解决方案** ###

软键盘将页面顶起来的解决方案，主要是通过监听页面高度变化，强制恢复成弹出前的高度。

//这个应该是input获取焦点的时候触发 vue:@focus
    // 记录原有的视口高度
    const originalHeight = document.body.clientHeight || document.documentElement.clientHeight;
    
    window.onresize = function(){
      var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
      if(resizeHeight < originalHeight ){
        // 恢复内容区域高度
        // const container = document.getElementById("container")
        // 例如 container.style.height = originalHeight;
      }
    }

键盘不能回落问题出现在 iOS 12+ 和 wechat 6.7.4+ 中，而在微信 H5 开发中是比较常见的 Bug。

兼容原理，1.判断版本类型 2.更改滚动的可视区域

const isWechat = window.navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i);
    if (!isWechat) return;
    const wechatVersion = wechatInfo[1];
    const version = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
     
     // 如果设备类型为iOS 12+ 和wechat 6.7.4+，恢复成原来的视口
    if (+wechatVersion.replace(/\./g, '') >= 674 && +version[1] >= 12) {
      window.scrollTo(0, Math.max(document.body.clientHeight, document.documentElement.clientHeight));
    }

window.scrollTo(x-coord, y-coord)，其中window.scrollTo(0, clientHeight)恢复成原来的视口
    
    window.scrollTo(0, 0)

实在不行整个页面定位吧

position: fixed;
    width: 100%;
    height: 100%;
    top: 0;

[https_juejin.im_post_6844904126388797448]: https://juejin.im/post/6844904126388797448