javascript - 如何检测Web中是否显示手机键盘？

Question

我一直在使用下面的代码，但是当键盘可见时什么也没有发生。我已经检查过，window.screen.height 没有改变。

class TestPage extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      keyboardIsShown: false,
    };
  }

  componentDidMount() {
    this.initialScreenSize = window.screen.height;

    this.keyboard = setInterval(() => {
      if (this.initialScreenSize !== window.screen.height) {
        !this.state.keyboardIsShown && this.setState({ keyboardIsShown: true });
      } else {
        this.state.keyboardIsShown && this.setState({ keyboardIsShown: false });
      }
    }, 800);
  }

  componentWillUnmount() {
    clearInterval(this.keyboard);
  }

  ...
}

Answer 1

通过使用 window.innerHeight 解决了 Android 设备的问题。

class TestPage extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      keyboardIsShown: false,
    };
  }

  componentDidMount() {
    this.initialScreenSize = window.innerHeight;

    this.keyboard = setInterval(() => {
      if (this.initialScreenSize !== window.innerHeight) {
        !this.state.keyboardIsShown && this.setState({ keyboardIsShown: true });
      } else {
        this.state.keyboardIsShown && this.setState({ keyboardIsShown: false });
      }
    }, 800);
  }

  componentWillUnmount() {
    clearInterval(this.keyboard);
  }

  ...
}