const ua = window.navigator.userAgent.toLocaleLowerCase();
const isIOS = /iphone|ipad|ipod/.test(ua);
const isAndroid = /android/.test(ua);

let isReset = true; //是否歸位

this.focusinHandler = () => {
  isReset = false; //聚焦時(shí)鍵盤(pán)彈出，焦點(diǎn)在輸入框之間切換時(shí)，會(huì)先觸發(fā)上一個(gè)輸入框的失焦事件，再觸發(fā)下一個(gè)輸入框的聚焦事件
};

this.focusoutHandler = () => {
  isReset = true;
  setTimeout(() => {
    //當(dāng)焦點(diǎn)在彈出層的輸入框之間切換時(shí)先不歸位
    if (isReset) {
        window.scroll(0, 0); //確定延時(shí)后沒(méi)有聚焦下一元素，是由收起鍵盤(pán)引起的失焦，則強(qiáng)制讓頁(yè)面歸位
    }
  }, 30);
};

document.body.addEventListener('focusin', this.focusinHandler);
document.body.addEventListener('focusout', this.focusoutHandler);

const originHeight = document.documentElement.clientHeight || document.body.clientHeight;

this.resizeHandler = () => {
  const resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
  const activeElement = document.activeElement;
  if (resizeHeight < originHeight) {
    // 鍵盤(pán)彈起后邏輯
    if (activeElement && (activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA")) {
      setTimeout(()=>{
        activeElement.scrollIntoView({ block: 'center' });//焦點(diǎn)元素滾到可視區(qū)域的問(wèn)題
      },0)
    }
  } else {
    // 鍵盤(pán)收起后邏輯
  }
};

window.addEventListener('resize', this.resizeHandler);

// keyboard.tsx
/*
 * @Description: 鍵盤(pán)處理裝飾器
 * @Author: hzzly
 * @LastEditors: hzzly
 * @Date: 2020-01-09 09:36:40
 * @LastEditTime: 2020-01-10 12:08:47
 */
import React, { Component } from 'react';

const keyboard = () => (WrappedComponent: any) =>
  class HOC extends Component {
    focusinHandler: (() => void) | undefined;
    focusoutHandler: (() => void) | undefined;
    resizeHandler: (() => void) | undefined;
    componentDidMount() {
      const ua = window.navigator.userAgent.toLocaleLowerCase();
      const isIOS = /iphone|ipad|ipod/.test(ua);
      const isAndroid = /android/.test(ua);
      if (isIOS) {
        // 上面 IOS 處理
        ...
      }
      if (isAndroid) {
        // 上面 Android 處理
        ...
      }
    }

    componentWillUnmount() {
      if (this.focusinHandler && this.focusoutHandler) {
        document.body.removeEventListener('focusin', this.focusinHandler);
        document.body.removeEventListener('focusout', this.focusoutHandler);
      }
      if (this.resizeHandler) {
        document.body.removeEventListener('resize', this.resizeHandler);
      }
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  };

export default keyboard;

// PersonForm.tsx
@keyboard()
class PersonForm extends PureComponent<{}, {}> {
  // 業(yè)務(wù)邏輯
  ...
}

export default PersonForm;