L08084のブログ

技術記事の執筆は祈りに似ている

【障害メモ】[cordova-plugin-keyboard][Android]ソフトウェアキーボードが入力フォームを覆い隠してしまう

障害内容

モバイル・タブレット端末のソフトウェアキーボードが、入力フォームの前面に表示されてしまうため、画面の下部にある入力フォームがキーボードに隠されて見えない。Android端末のみで発生

環境

  • cordova (Cordova CLI) : 8.0.0
  • Ionic Framework : ionic-angular 3.9.5
  • cordova-plugin-ionic-keyboard@2.0.5

修正方法

実際に本障害をなおす上で実施した改修

  1. cordova-plugin-ionic-keyboardのバージョンを2.2.0にアップグレードする
  2. アプリを全画面表示にするのをやめる

ライブラリのアップグレードは必要なかったかも.......

アプリを全画面表示にするのをやめる

具体的には、config.xmlから<preference name="Fullscreen" value="true" />を削除してアプリの全画面表示設定を解除したり、cordova-plugin-statusbarでステータスバーのオーバーレイ設定をオンにしている場合は、オフにするなどする必要がある。

ステータスバーのオーバーレイ表示をオフにする

StatusBar.overlaysWebView(false);

アプリの全画面表示をオンにしたままでも、cordova-plugin-ionic-keyboardresizeOnFullScreentrueにする(config.xmlに<preference name="resizeOnFullScreen" value="true" />を追加する)ことでキーボードの本バグを修正できるとのことだったが、自分の場合は、別の障害(ナビゲーションバーが画面の下部を覆い隠す)が発生したりしてうまくいかなかった

参考サイト

https://github.com/ionic-team/cordova-plugin-ionic-keyboard#resizeonfullscreen-for-android-only

https://github.com/apache/cordova-plugin-statusbar#statusbaroverlayswebview