私はiPad用のWebアプリを書いています（通常のApp Storeアプリではない(HTML、CSS、JavaScript を使用して記述されています)。キーボードは画面の大部分を占めるため、キーボードが表示されているときに残りのスペースに収まるようにアプリのレイアウトを変更するのは理にかなっています。ただし、キーボードがいつ表示されるか、または表示されるかどうかを検出する方法が見つかりませんでした。
最初に考えたのは、テキスト フィールドにフォーカスがあるときにキーボードが表示されると想定することでした。しかし、iPad に外部キーボードが接続されていると、テキスト フィールドにフォーカスがあっても仮想キーボードは表示されません。
私の実験では、キーボードはどの DOM 要素の高さやスクロール高さにも影響を与えず、キーボードが表示されているかどうかを示す独自のイベントやプロパティも見つかりませんでした。
ベストアンサー1
少し見苦しいですが、機能する解決策を見つけました。また、あらゆる状況で機能するわけではありませんが、私の場合はうまくいきました。ユーザー インターフェイスのサイズを 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 でテストしてみましたが、問題なく動作するようです。