IOS7 Определить высоту клавиатуры с помощью Javascript?

Теперь эта проблема сделала это раньше (Какова высота экранной клавиатуры 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);

Но это похоже на то, видима ли клавиатура или нет.

Итак, мой вопрос: кто-нибудь нашел способ определить высоту клавиатуры iOS7 в JavaScript? Может быть, обходной путь? Вряд ли, но может ли это быть ошибкой в ​​сафари iOS7?

Любая помощь будет оценена по достоинству. Спасибо.

Ответы

Ответ 1

Итак, ответ: я ошибался в том, что не смог обнаружить изменение 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', '.input-field', function(){
    setTimeout(function(){
         window.scrollTo(0, $('#modalInput').offset().top-100);
    }, 0);
}).on('keyup', '.input-field', function(){
    setTimeout(function(){
         window.scrollTo(0, $('#modalInput').offset().top-100);
    }, 0);
});

Таким образом, положение прокрутки никогда не изменяется с того места, где вы хотите, пока пользователь печатает.

Примечание. Единственный раз, когда мне удалось обнаружить изменения в window.innerHeight, было включено событие включения keyup, потому что в этот момент клавиатура была сделана анимацией и полностью показана на странице. В фокусе он все еще сказал, что innerHeight был таким же, как без клавиатуры.