jQuery/js/html5 изменяет содержимое страницы, когда клавиатура видна на мобильных устройствах

Возможный дубликат:
Веб-приложение для iPad: обнаружение виртуальной клавиатуры с помощью JavaScript в Safari?

Я создаю мобильную версию для веб-сайта, и мне интересно, могу ли я создать с помощью jQuery/js/html5 или любой другой технологии тот же эффект разделения экрана, который можно сделать в мобильных приложениях, когда видна виртуальная клавиатура.

Например, если пользователь заходит на мою веб-страницу и щелкает текстовое поле ввода, отображается виртуальная клавиатура, и браузер автоматически увеличивает область ввода текста.

Я хочу, чтобы у меня была возможность изменять содержимое моей страницы в тот момент, когда виртуальная клавиатура отображается в зависимости от нового разрешения (высота экрана - высота клавиатуры), путем перемещения поля ввода текста в верхней части экрана с последующими советами в зависимости от что пользователь вводит в текстовое поле.

Вот несколько набросков, чтобы понять, о чем я говорю:

Это просмотр страницы без клавиатуры, результаты на основе поиска:

страница с портретной клавиатурой, логотип исчезает, ввод текста перемещается вверх и отображается максимум 4 элемента

страница с альбомной клавиатурой, логотип исчезает, затем ввод перемещается вверх и увеличивается, отображаются только 2 элемента

если клавиатура скрыта, страница должна перейти в фазу 1.

Надеюсь это поможет.

Ответ 1

Я пробовал первое решение для вашей проблемы, поймав событие изменения размера С этим вы можете знать, что ориентация и жгут - клавиатура видна.

UPDATE: добавление поддержки iOS для мобильных сафари с помощью LKM-решения

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();
    }
}

Для JS на основе этого HTML

<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>

Отметьте мою страницу примера