16

重複の可能性：
iPad Webアプリ：SafariでJavaScriptを使用して仮想キーボードを検出しますか？

Webサイトのモバイル版を作成していますが、jQuery / js / html5またはその他のテクノロジーを使用して、仮想キーボードが表示されているときにモバイルアプリで作成できるのと同じ分割画面効果を作成できるかどうかに興味があります。

たとえば、ユーザーが私のWebページに入り、入力テキストフィールドをクリックすると、仮想キーボードが表示され、ブラウザは入力テキストフィールドがある領域に自動的にズームします。

私が欲しいのは、仮想キーボードが表示された瞬間に、新しい解像度（画面の高さ-キーボードの高さ）に基づいて、入力テキストフィールドを画面の上部に移動し、それに応じていくつかのヒントを表示することで、ページのコンテンツを変更できるようにすることです。ユーザーがテキストフィールドに入力する内容。

これが私が話していることを見るためのいくつかのスケッチです：

これはキーボードなしのページビューで、検索に基づく結果です。

キーボードなしのページ

縦向きのキーボードを使用したページでは、ロゴが消え、テキスト入力が上に移動し、最大4つのアイテムが表示されます

ポートレートキーボード付きのページ

横向きのキーボードを使用したページでは、ロゴが消え、入力が上に移動して拡大され、2つのアイテムのみが表示されます

ここに画像の説明を入力してください

キーボードが非表示になっている場合、ページはフェーズ1に進む必要があります。

お役に立てれば。

4

1 に答える 1

36

サイズ変更イベントをキャッチすることで、問題の最初の解決策を試しました。これにより、キーボードが表示されている方向とゲストを知ることができます。

更新： LKMソリューションでiOSモバイルサファリサポートを追加

var is_keyboard = false;
var is_landscape = false;
var initial_screen_size = window.innerHeight;

/* Android */
window.addEventListener("resize", function() {
    is_keyboard = (window.innerHeight < initial_screen_size);
    is_landscape = (screen.height < screen.width);

    updateViews();
}, false);

/* iOS */
$("input").bind("focus blur",function() {
    $(window).scrollTop(10);
    is_keyboard = $(window).scrollTop() > 0;
    $(window).scrollTop(0);
    updateViews();
});

これで、ロゴといくつかのラインアイテムを表示および非表示にできます

function updateViews() {
    $("li").hide();
    if (is_keyboard) {
        $("#logo").hide();
        if (is_landscape) {
            $("li").slice(0, 2).show();
        }
        else {
            $("li").slice(0, 4).show();
        }
    }
    else {
        $("#logo").show();
        $("li").show();
    }
}

このHTMLに基づくJSの場合

<div id="logo">Logo</div>
<input type="text"><input type="submit" value="search">
<ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
</ul>

私のサンプルページをチェックしてください

于 2012-07-25T12:56:51.937 に答える