[解決済み] iPadのWebアプリ。SafariでJavaScriptを使用して仮想キーボードを検出しますか？

質問

iPad用のWebアプリを書いています( 通常のApp Storeアプリではありません。 - HTML、CSS、JavaScriptで書かれています）。キーボードは画面の大部分を占めるので、キーボードを表示したときに残りのスペースに合わせてアプリのレイアウトを変更することは理にかなっていると思います。しかし、キーボードが表示されているかどうかを検出する方法がありません。

最初に考えたのは、テキストフィールドにフォーカスがあるとき、キーボードが表示されていると仮定することでした。しかし、iPadに外付けキーボードを取り付けると、テキストフィールドにフォーカスがあるときに仮想キーボードが表示されなくなります。

私の実験では、キーボードもDOM要素の高さやscrollheightに影響を与えず、キーボードが表示されているかどうかを示す独自のイベントやプロパティも見つかりませんでした。

解決するには？

少し醜いですが、うまくいく解決策を見つけました。また、すべての状況でうまくいくわけではありませんが、私にとってはうまくいっています。iPadのウィンドウサイズにユーザーインターフェースのサイズを合わせているので、通常、ユーザーはスクロールすることができません。つまり、ウィンドウのscrollTopを設定すると、0を維持することになります。

一方、キーボードを表示させると、いきなりスクロールができるようになります。そこで、scrollTopを設定し、すぐにその値をテストして、リセットすることができる。jQueryを使ったコードでは、このようになる。

$(document).ready(function(){
    $('input').bind('focus',function() {
        $(window).scrollTop(10);
        var keyboard_shown = $(window).scrollTop() > 0;
        $(window).scrollTop(0);

        $('#test').append(keyboard_shown?'keyboard ':'nokeyboard ');
    });
});

通常、これはユーザーには見えないと思われます。しかし、残念ながら、少なくともシミュレータで実行すると、iPadは目に見えて（すぐにですが）上下にスクロールし直します。それでも、少なくともいくつかの特定の状況では、動作します。

iPadでテストしてみましたが、問題なく動作しているようです。