软键盘将页面顶起来、收起未回落问题_focusin监听顶起页面-CSDN博客

监听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 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;