16

さて、この問題は以前にもここで取り上げました ( iPad のオンスクリーン キーボードの高さは? ) ですが、最近 iOS7 がリリースされたため、再確認が必要だと思います。

問題: ページの右下隅に固定位置のモーダルが表示されます。モーダルが開いたときにフォーカスを得る単一のフォーム フィールドがあります。フォーカスにより、ソフトキーボードが開きます。問題は、モーダルをキーボードの上部に配置するためにキーボードの高さをプログラムで検出したいということです。そうしないと、モーダルの一部がビューから切り取られます。

私が試したこと： 

    var scrollHere = currentWidget.offset().top;
    //this scrolls the page to the top of the widget, but the keyboard is below.
    setTimeout(function() {
        $('html, body').scrollTop(scrollHere);
    }, 0);

ページがモーダルの一番上までスクロールします。フォーム フィールドがキーボードの下に隠れている場合があるため、理想的ではありません。

また、window.innerHeight を警告しようとしました

    alert(window.innerHeight);

しかし、それはキーボードが表示されているかどうかに関係なく同じであることがわかります。

私の質問は、JavaScript で iOS7 のキーボードの高さを検出する方法を見つけた人はいますか? 回避策があるかもしれませんか？可能性は低いですが、これは iOS7 サファリのバグでしょうか?

どんな助けでも大歓迎です。ありがとうございました。

4

1 に答える 1

11

答えは、window.innerHeight の変更を検出できないことについて間違っていたということです。

変更を検出できなかった理由は、iPad ではキーボードが下から上にアニメーション化され、ウィンドウのサイズ変更イベントが発生しないためです。私の解決策は、ウィンドウのサイズを検出することではなく、モーダルが開いているときに本体の最大高さを 100% にしました。次に、ユーザーがテキスト フィールドにフォーカスし、その時点でスクロール位置を操作するのを待ちます。

$(document.body).on('focus', '.input-field', function(){
    setTimeout(function(){
         window.scrollTo(0, $('#modalInput').offset().top - 100);
    }, 0);
});

これは、入力フィールドに集中する場合に使用します。iOS は、キーボードが開いたときにウィンドウをフィールドの中央に配置しようとするのが好きで、ユーザーが見る必要がある入力の上に情報があるとしたら、それは面倒なことです。上記の例では、テキスト フィールドがキーボードのすぐ上に表示されるようにウィンドウをスクロールします。必要なことはそれだけだと思う​​かもしれませんが、iOS は時々賢くなりすぎようとします。ユーザーが入力の入力を開始すると、再び入力が中心になります! したがって、上記のコードを取得して、次のようにします。

$(document.body).on('focus keyup', '.input-field', function(){
    setTimeout(function(){
         window.scrollTo(0, $('#modalInput').offset().top - 100);
    }, 0);
});

このようにして、ユーザーが入力している間、スクロール位置が希望する場所から変更されることはありません。

注: window.innerHeight の変化を検出できたのは on keyup イベントだけでした。これは、その時点でキーボードのアニメーション化が完了し、ページに完全に表示されたためです。フォーカスすると、innerHeight はキーボードがない場合と同じであることがわかりました。

于 2013-10-09T13:05:25.023 に答える