ios12键盘唤起后，收回键盘弹窗错位解决方案

问题

最近React的一个H5移动端项目遇到个问题，在iOS12中发现：点开弹窗后，点击弹窗里的input输入框，唤起键盘后，弹窗被键盘顶到页面顶部。但是在收起键盘后，弹窗表面上看是回到原位了，但是却无法聚焦到input输入框了，也无法关闭了。经过观察发现弹窗虽然是回到原位了，但实际弹窗的位置还在顶部，弹窗位置错位导致页面元素也因此失效。

解决方案

判断引发原因是页面的滚动高度并未重置，那么解决思路是：

1.首先监听聚焦，增加一个判断参数，然后在input失焦的时候判断是否为全部input失焦（其他的input输入框同时被聚焦时不是全部失焦）

2.在全部失焦时，重置页面滚动高度，从而达到键盘收起后页面回到原来位置的操作。

示例代码

const isFocus = false;

//失焦时绑定的事件
const handleBlur = () => {
    //判断iOS版本
    const ios_version = (navigator as any).userAgent.match(/os\s+(\d+)/i)[1] - 0;
    if (ios_version > 11) {
      this.isFocus = false;
      setTimeout(
        () => {
          if (!this.isFocus) {
            //重置页面滚动高度，使键盘收起后页面回到原位置
            window.scrollTo(0, 20);
          }
        },
        200,
      );
    }
  }

//聚焦时绑定的事件
const handleFocus = () => {
  this.isFocus = true;
}