webview嵌套h5，ios弹出键盘后，页面位置有一截空白

前言

   因h5要在app显示，所以用webview进行了嵌套，但是发现ios系统在文本框（text，或者textarea）获取焦点后，一旦弹出键盘，键盘收起后，界面就会产生一大截空白。

   如图（箭头指向就是多出的空白，正常底图背景颜色是灰色）：

   

原因

   经排查和查阅相关资料后，发现当键盘弹出后，页面会被键盘的高度顶上去，这个操作改变了window.srollY这个属性的值（window.srollY：文档当前垂直滚动的像素数），键盘收起后，页面还停留在当前scrollY偏移的位置，所以会有一大块的空白。

解决方案

  监听输入框失去焦点的时候（也是键盘收起的时候），就自动让窗口回到顶部，重置scrollY偏移的位置，这样页面就能恢复正常。所以只需要在每个输入文本框监听以下事件：

 

<input placeholder="输入框" @blur="changeBlur" />

/**

 * 解决ios文本框点击弹出键盘后，页面位置不恢复，有一截键盘的空白

 */

export function changeBlur() {

  let u = navigator.userAgent

  let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // 检测是否为ios

  if (isIOS) {

    setTimeout(function() {

      const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0

      window.scrollTo(0, Math.max(scrollHeight - 1, 0))

    }, 100)

  }

}