How to detect if mobile keyboard is shown in Web?

Question

I have been using the code below but when the keyboard is visible nothing happens. I have checked and window.screen.height is not changing.

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);
  }

  ...
}

the screen size remains the same regardless of what's on it ... perhaps - window.innerHeight (apparently for android) - this has been asked before though ... e.g. https://stackoverflow.com/questions/6196195/android-iphone-webkit-event-triggered-on-keyboard-pop and https://stackoverflow.com/questions/28901793/is-it-possible-to-detect-a-mobile-keyboard just the first two that came up with a google search — Jaromanda X, Feb 24 '20 at 08:31

score 1 · Answer 1 · answered Feb 24 '20 at 09:30

Solved it for Android devices by using window.innerHeight.

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);
  }

  ...
}

How to detect if mobile keyboard is shown in Web?

1 Answers1