(React.js)画面下のfixedテキストエリアがソフトウェアキーボードで隠れてしまう

Question

###(React.js)画面下のfixedテキストエリアがソフトウェアキーボードで隠れてしまう

react.jsでWEBアプリを作成しています。

画面の一番下にfixedで固定したテキストエリアがあります。
そのテキストエリアにフォーカスして日本語を打ち込む際に
下記のような「入力状態が確認できない」状態になってしまい困っています。
環境はiPhone(ios10)のchrome, safari, firefoxなどの各種ブラウザです。

青い「×」のエリアはソフトウェアキーボードの仕様で
DOMの上に被さる形で表示されており、jsやcssでどうこう出来るレベルではないかも、、と思っています。
ただなんとか回避する策がございましたらご教授願いたく思います。
困っています。よろしくお願いいたします。

Answer 1

調べてみたところ、キーボード表示時の表示領域の高さ等も取得できず、うまい具合に下に固定することできないっぽいですね。さらに、inputにfocus時はposition:fixedもposition:absoluteのようなふるまいするようですね。

回避策とは違いますが、僕なりの解決策としてはfocus時はinputエリアを上固定で表示するのはどうでしょうか。上固定ならiOSでもjs使えばできます。

このUI、スマホなら変じゃなく、むしろキーボードが表示される変化があるため良さ気に感じます。

デモ http://jsdo.it/ksk1015/ONzc

Comments

[mirazle]

ご回答ありがとうございます。

その後、US,中国、韓国、日本の各種ソフトウェアキーボードの挙動を調べてみたところ、
US,韓国はこのケースは再現せず、日本と中国は再現するようでした。

またios10以下はこのような挙動になっていなかったと記憶しています。
おそらく各国ごとの仕様の統制が取れていないバージョンなのかなと。

また、やはりSPで見たときのテキスト入力は下固定がスタンダードなため、
それを崩すのはUIUX的に難しいです。
ですので、そのうち改善されることを願って一旦放置することにします。

調査いただきありがとうございました。
また何かありましたらご教授いただけると幸いです。