html5モバイルキーボードのポップアップを片付ける対応

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

let isReset = true; //whether to return

this.focusinHandler = () => {
  isReset = false; //Focus when the keyboard pops up and the focus switches between input boxes, it will first trigger the out-of-focus event of the previous input box, then the focus event of the next input box
};

this.focusoutHandler = () => {
  isReset = true;
  setTimeout(() => {
    // first does not return when focus switches between input boxes in the popup layer
    if (isReset) {
        window.scroll(0, 0); // make sure the next element is not focused after the delay, it is out of focus caused by putting away the keyboard, then force the page to return
    }
  }, 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) {
    // Logic after keyboard pop-up
    if (activeElement && (activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA")) {
      setTimeout(()=>{
        activeElement.scrollIntoView({ block: 'center' });// the focus element rolls to the visible area
      },0)
    }
  } else {
    // logic after keyboard is put away
  }
};

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

// keyboard.tsx
/*
 * @Description: Keyboard handling decorator
 * @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 processing above
        ...
      }
      if (isAndroid) {
        // Android processing above
        ...
      }
    }

    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<{}, {}> {
  // Business logic
  ...
}

export default PersonForm;