要件説明：リアクトテクノロジースタック、フレックスフレキシブルレイアウトを使用したH5フォームウェブページのモバイル実装、上部にフォーム入力エリア、下部に固定された送信ボタン。
このシナリオでは、次の2つの落とし穴に必ずぶつかります：
- 入力ボックスをクリックしてフォーカスイベントを取得すると、電話入力キーボードがポップアップ表示され、常に一番下のボタンの上に表示されます。
- 入力ボックスがページの下の位置にある場合、キーボードがポップアップして入力する領域が見えなくなり、入力を始めて初めて入力位置までスクロールされるため、ユーザーエクスペリエンスが非常に悪くなります。
//コンポーネントのライフサイクル関数に
componentDidMount() {
// コンテンツエリアの高さ
const h = document.body.scrollHeight;
//ページサイズの変更に耳を傾ける
window.addEventListener("resize", function () {
// キーボードがポップアップした後、入力エリアを覆ってしまう問題を解決する。
if (document.activeElement.tagName == "INPUT" || document.activeElement.tagName == "TEXTAREA") {
window.setTimeout(function () {
document.activeElement.scrollIntoViewIfNeeded();
}, 0);
}
//キーボードがポップアップし、下に固定されたボタンを上に置く問題を解決する。
//btnSubmitはボタンエリアのノードIDである。
const bottomBtn = document.querySelector("#btnSubmit");
if (document.body.scrollHeight < h) {
bottomBtn.style.display = "none";
} else {
bottomBtn.style.display = "block";
}
}
上記のコードは比較的シンプルですが、基本的にはこの2つの落とし穴を簡単に解決することができます。
