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

Question

Теперь этот вопрос сделал это раньше (What is the height of iPad's onscreen keyboard?), но я думаю, что он нуждается в обновлении из-за недавно выпущенного 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?

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

Answer 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 был таким же, как без клавиатуры.