iPhoneでキーボードが入力欄を隠してしまうとき
タップした入力欄の上にキーボードがかぶさって、打っている文字が見えない。これはキーボードの不具合ではなく、下にあるアプリやWebページが場所を空けていないことがほとんどです。見分け方と現実的な対処をまとめます。
画面の下のほうにある入力欄をタップした瞬間、キーボードがせり上がってきて、その入力欄の上にちょうど重なってしまう。記事下のコメント欄、ログインフォーム、ページ下部に固定されたチャットの吹き出し。文字は打てているはずなのに、打った内容も入力欄そのものも見えません。感覚としては「キーボードの位置がおかしい」のですが、実際に動いていないのは、たいていキーボードの下にあるアプリやWebページのほうです。
iOSはレイアウトを勝手に直してくれない
キーボードが表示されるとき、iOSが自動でやることはひとつだけです。キーボードの大きさと表示位置を、標準の通知としてアプリやWebページに伝えます。仕様として決まっているのはそこまでで、ページをスクロールしたり、コンテンツを縮めたり、入力欄を押し上げたりすることはありません。寸法を渡したあとは、入力先のアプリやページ側の仕事になります。
きちんと作られたアプリやページは、その通知を受け取って自分のレイアウトを調整します。タップされた入力欄がキーボードの上に残るように、必要な範囲だけをスライドさせるわけです。逆に、通知を受け取っていない、あるいは受け取っていても計算を誤っている場合、入力欄は最初の位置にとどまったままになります。誰も動かさないので、せり上がったキーボードがそのまま覆いかぶさる、というのが起きていることのすべてです。
アプリよりもWebページで圧倒的に起きやすい理由
アップル純正の開発ツールで作られたネイティブアプリは、標準部品の時点でキーボード回避の動作が組み込まれているため、放っておいても正しく処理されることが多いです。問題はSafariで開いたWebページや、アプリ内でリンクを開いたときに立ち上がる内蔵ブラウザのほうです。モバイル版のSafariは、キーボードが出てもページそのものの高さを変えるのではなく、表示されている領域のほうを縮めます。ここで、画面下端に固定する形で作られた要素があると、縮んだ表示領域ではなくページ全体の高さを基準に位置が決まってしまうことがあります。結果として、入力欄は一歩も動かないまま、キーボードだけがその上まで上がってくることになります。
チャット欄とコメント欄が典型例なのは偶然ではない
この症状の相談がこの二つに集中するのには理由があります。サポート用のチャット、記事下のコメント投稿欄、Webアプリのメッセージ入力欄。いずれも画面の下端に小さなパネルを固定する作りが一般的で、それはまさにキーボードの上端位置を読み違えやすいレイアウトです。逆に、ページの上のほうにある検索ボックスや通常のフォームで同じ問題が起きにくいのは、その上に十分なスクロール可能領域があるからです。
どちら側の問題かを見分ける
- 特定のWebサイト、あるいは特定のアプリだけで起きて、ほかでは問題ない。この場合はそのページやアプリがキーボードに対応できていません。実際にはこれが大半です。
- メモ、メッセージ、メールでも同じように起きて、しかもどのキーボードでも起きる。この場合はアプリ側ではなく端末側を見る余地がありますが、頻度としてはかなりまれです。
- チャットウィジェットやコメント欄など、ページ下部に固定されたものだけで起きる。前述の固定配置による典型的なパターンです。
- 画面を回転させた直後だけ起きて、入力欄を一度タップし直すと解消する。この場合はレイアウトの再計算が遅れているだけで、回転後にもう一度タップすれば落ち着くことがほとんどです。
実際に効く対処
- キーボードが出た状態で、画面を指で少しスクロールしてみます。自動では位置を直さないページでも、手動のスクロールには反応することが多く、少し動かすだけで入力欄がキーボードの上に戻ります。
- 入力欄の外を一度タップしてから、もう一度入力欄をタップします。フォーカスが移った瞬間にだけレイアウトを再計算するページがあるため、キーボードが出ている状態での二回目のタップで直ることがあります。
- SafariでWebページを見ている場合は、アドレスバーのメニューから「デスクトップ用Webサイトを表示」を試します。デスクトップ向けのレイアウトは、前述のモバイル特有の固定配置に頼っていないことが多く、入力欄が隠れずに済む場合があります。
- 同じ手続きが専用アプリでもできるなら、そちらを使います。銀行のWebサイトではなく銀行のアプリ、というように、ネイティブアプリのほうがキーボード回避を正しく処理している可能性が高いです。
- 設定で直すものではありません。これは設定項目の問題ではないので、設定 App →「一般」→「キーボード」を探しても該当するスイッチはありません。
ほかのキーボードに変えれば直るのか
直りません。そして悪化することもありません。iOS上のキーボードは、純正であれサードパーティ製であれ、同じ標準の通知を通して自分の大きさと位置をアプリに伝えます。その情報をどう使うかを決めるのはアプリやページ側で、キーボード側からその境界を越えてページのレイアウトを動かす手段は用意されていません。キーボードを入れ替えれば見た目や打鍵音は変わりますが、場所を空ける責任がどちらにあるかは変わらないということです。
よくある質問
なぜタップした入力欄の真上にキーボードが重なるのですか。
iOSはキーボードの大きさと位置をアプリやWebページに伝えるだけで、コンテンツを動かすのはそれぞれのアプリやページの役割だからです。ページ下部に固定されたチャット欄やコメント欄のように、その調整をしていない作りだと、動かないままの入力欄の上にキーボードが重なります。
キーボードアプリを別のものに変えれば解決しますか。
解決しません。純正を含めどのキーボードも同じ方法で自分の大きさをアプリに伝えるだけで、アプリ側のコンテンツを動かす能力は持っていません。対処があるとすればアプリやWebページ側であって、どのキーボードを追加しているかとは無関係です。
キーボードが入力欄を隠さないようにする設定はありますか。
ありません。そもそもキーボード側の問題ではなく、特定のアプリやページがキーボード表示時に自分のコンテンツを配置し直していないという話なので、設定として用意されていません。
自分のキーボードで試す
Kiboは、本物のメカニカルキー音とテーマ、RGBバックライト効果を備えたiPhone向けの無料カスタムキーボードです。アカウント登録も広告もなく、フルアクセスをオフにしたままでも使えます。