先日投稿した「【Cordova】「cordova-plugin-keyboard」プラグインで入力欄フォーカス時に黒いエリアが現れる時の対処法」でも紹介しましたが、iOS でソフトウェアキーボードが表示されたタイミングで謎の黒いエリアが表示される不具合が発生しました。
対処方法としては、<meta name="viewport" /> タグ内に記載している "viewport-fit=cover" を削除すれば解決する！というものがありました。
早速こちらの方法を試したところ、確かにこの記述を削除すればソフトウェアキーボード表示時の挙動は正常に戻りましたが、その代わりに iPhoneX など画面にノッチのある端末で見たときに画面下部のセーフエリアまでコンテンツが表示されなくなってしまいました…。
"viewport-fit=cover" を削除したので、まあ当たり前なのですが…。
アプリのデザインによっては、セーフエリアまでコンテンツが表示されなくても問題ない場合もあるかもしれませんが、残念ながら、現在開発中のアプリでは問題ありなので、対応しなければなりませんでした。
で、色々試した結果、scrollIntoView() メソッドを使うのが一番簡単で、挙動的にも自然でしたのでこちらを採用しました。
scrollIntoView() とは、指定した要素が見える位置まで body などの親要素をスクロールしてくれるというメソッドです。
実は今回初めて使いました。
そして、こちらのメソッドにはいくつかオプションがあり、スクロール時のアニメーションを有効にしたり、要素の表示位置が画面中央になる様にスクロールすることもできます。
私は、スクロールアニメーションなしで、要素を画面中央に表示させたかったので、下記のように指定しました。
document.activeElement.scrollIntoView({ block: 'center' });
なお、document.activeElement とは現在フォーカス中の要素を返すプロパティです。
もちろん、document.getElementById() などを使って要素を取得しても問題ありません。
で、こちらを呼び出すタイミングが、ソフトウェアキーボードが表示されたときなのですが、それにはプラグインの keyboardDidShow イベントを利用しました。
こちらはソフトウェアキーボードが完全に表示されたら発火するイベントです。
そして最終的に実装したコードが下記の通りです。
window.addEventListener('keyboardDidShow', function () {
// キーボードが表示されたら実行する処理を追加
document.activeElement.scrollIntoView({ block: 'center' });
});
こちらを実行すると、一旦黒い空白は表示されてはしまうものの、画面が自動でスクロールし、現在フォーカスが当たっている要素が画面の中央にきちんと現れるようになりました！
Xcode のシミュレーションでは若干変な挙動をしましたが、実機では問題なく動作しましたので、こちらで大丈夫だと思います。
念のため、いくつかの端末でも動作確認を行う予定です。
以上、「cordova-plugin-keyboard」でキーボード表示時に黒いエリアが現れるときの対処法について、完全解決版でした。
ご参考になれば幸いです。
