web-dev-qa-db-ja.com

iOSキーボードがCSSまたはJSでビューを画面から押し出さないようにする方法

ボタンをタップするとモーダルを開く応答性の高いWebページがあります。モーダルが開くと、固定位置を使用してページの幅と高さ全体を占めるように設定されます。モーダルには入力フィールドもあります。

IOSデバイスでは、入力フィールドにフォーカスがあると、キーボードが開きます。ただし、開くと、実際にはドキュメント全体が邪魔にならない位置に押し上げられ、ページの半分がビューポートの上部に表示されます。実際のhtmlタグ自体がキーボードを補うために押し上げられ、CSSまたはJavaScriptを介して行われていないことを確認できます。

誰かがこれを以前に見たことがありますか？もしそうであれば、それを防ぐ方法、またはキーボードが開いた後に物事を再配置する方法はありますか？ユーザーがモーダルの上部にあるコンテンツを表示できるようにすると同時に、入力フィールドを自動フォーカスしたいので、これは問題です。

javascriptcssresponsive
21
rescuecreative

Reactでこれに遭遇した人のために、私はこれを@ankurJosソリューションを次のように適応させることでなんとか修正しました：

const inputElement = useRef(null);

useEffect(() => {
  inputElement.current.onfocus = () => {
    window.scrollTo(0, 0);
    document.body.scrollTop = 0;
  };
});

<input ref={inputElement} />
0
lewislbr

scrollTo top（0、0）が必要ない場合もこれを行うことができます。

window.scrollBy(0, 0)
0
Otani Shuzo