浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【Cordova】「cordova-plugin-keyboard」プラグインで入力欄フォーカス時に黒いエリアが現れる時の対処法

久しぶりな気がする Cordova のプラグインについて。
今回は、以前も紹介した「cordova-plugin-keyboard」の不具合についてです。
個人的にはバグ・不具合というよりも、特定の設定との相性が悪いと言った方が正しいと思っています。

さて、遭遇した現象ですが、iOS で「cordova-plugin-keyboard」プラグインを導入したところ、<input> 要素や <textarea> 要素をタップしてフォーカスが当たり、ソフトウェアキーボードが表示された際に、謎の黒いエリアが現れるようになってしまいました。
こちらのプラグインは、画面下部に配置した <textarea> 要素に入力しようとした時、キーボードの後ろに隠れてしまうため、その対処として導入したのですが…一難去ってまた一難とはこのことなのでしょうか…。
検証ツールで見てみても、そもそも <body> 要素が上にずれてて、何をどうして直せばいいのかわからない…。

 

今回参考にさせていただいた投稿はこちらから。

app moves on input focus ios 12 and above · Issue #83 · cjpearson/cordova-plugin-keyboard · GitHub
https://github.com/cjpearson/cordova-plugin-keyboard/issues/83

cordova-plugin-keyboard の Issues に解決方法についての投稿がありました!
なお、先ほどから言っている「謎の黒いエリア」のスクリーンショットも載っているので、イメージが付きやすいと思います。

で、こちらによると、<meta name="viewport" /> 要素内で指定している "viewport-fit=cover" を削除するといいとのことでした。
実際に試したところ…確かに黒いエリアが消えました!
検証ツールで確認しても <body> 要素が変なことにもなっていないし、無事解決です!

…と思っていたのですが、こちらを iPhoneX など、ノッチのある端末で確認したところ、画面下部のセーフエリアまでコンテンツが表示されないという状態に…。
"viewport-fit=cover" を削除したので当然ではあるのですが、これどちらを優先させようか…。
とりあえず、両立する方法はないか調査したいと思います!

 

以上、「cordova-plugin-keyboard」プラグインを導入した際、入力欄がフォーカスされた時に黒いエリアが現れる時の対処法でした。
ご参考になれば幸いです。

  • この記事いいね! (0)