【React/Next.js】スマホのキーボードの出現を検知したい

結論

window.onresizeを使ってwindowの高さの変化を検知して対応(※あまり美しい方法ではありません)

現象

• スマホユーザーが何かに入力しようとすると下からキーボードが現れてレイアウトが崩れてしまう。

したいこと

• キーボードの出現を検知したい

やったこと

• 最初に開いた時の縦の長さを記憶しておいて、その長さ以下になればキーボードが出現したことにする

サンプルコード

  let initHeight = null;
  useEffect(() => {
    initHeight = window.innerHeight;
    window.onresize = () => {
      if (window.innerHeight < initHeight) {
        // キーボードが開いた時の処理
      } else {
        // キーボード が閉じている時の処理
      }
    };
  }, []);

コード解説

• windowはレンダリング前は存在しないのでuseEffect内で処理を定義
• window.onresizeはウィンドウの大きさが変化した時に動くコールバック
• 最初のウィンドウの縦の長さと比較して、小さければキーボードの出現とみなす。

注意点

• ブラウザの大きさを変更した時も反応してしまう（今回はスマホ用画面を対象としているため問題ないと判断しました)

#　感想など諸々

• 入力するところが一つしかないならその要素のonFocusをいじればいいと思います。
• ReactNativeにはキーボードを扱うクラスがあったけど、Reactにはないのか？
• wondow.KeyBoardという使い方不明のメソッドの使い方を教えてください。
• もっといい方法あると思うんですが見つからないし思いつきもしなかったので、誰か教えてください