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

Question

Я пишу веб-приложение для iPad ( не обычное приложение App Store - оно написано с использованием HTML, CSS и JavaScript). Поскольку клавиатура занимает большую часть экрана, имеет смысл изменить макет приложения, чтобы он соответствовал оставшемуся пространству при отображении клавиатуры. Однако я не нашел способа определить, когда или отображается ли клавиатура.

Моей первой идеей было предположить, что клавиатура видна, когда текстовое поле имеет фокус. Однако когда к iPad подключена внешняя клавиатура, виртуальная клавиатура не отображается, когда текстовое поле получает фокус.

В моих экспериментах клавиатура также не влияла на высоту или высоту прокрутки ни одного из элементов DOM, и я не обнаружил собственных событий или свойств, которые бы указывали, видна ли клавиатура.

Answer 1

Это решение запоминает положение прокрутки

    var currentscroll = 0;

    $('input').bind('focus',function() {
        currentscroll = $(window).scrollTop();
    });

    $('input').bind('blur',function() {
        if(currentscroll != $(window).scrollTop()){

        $(window).scrollTop(currentscroll);

        }
    });

Answer 2

Проблема в том, что даже в 2014 году устройства непостоянно обрабатывают события изменения размера экрана, а также события прокрутки при открытой программной клавиатуре.

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

Я использую медиазапросы (или window.matchMedia ) для определения ширины и Modernizr для обнаружения событий касания.

Answer 3

Я провел некоторый поиск и не смог найти ничего конкретного для «на клавиатуре показано» или «на клавиатуре отклонено». См. официальный список поддерживаемых событий . Также см. Техническое примечание TN2262 для iPad. Как вы, вероятно, уже знаете, существует событие body onorientationchange, которое вы можете подключить для обнаружения ландшафта / портрета.

Точно так же, но дикое предположение ... Вы пытались определить изменение размера? Изменения области просмотра могут вызвать это событие косвенно с отображаемой / скрытой клавиатуры.

window.addEventListener('resize', function() { alert(window.innerHeight); });

Что просто предупредит новую высоту при любом событии изменения размера ...

Answer 4

Ну, вы можете определить, когда ваши поля ввода имеют фокус, и вы знаете высоту клавиатуры. Также доступен CSS для определения ориентации экрана, поэтому я думаю, что вы можете взломать его.

Хотелось бы как-нибудь обработать корпус физической клавиатуры.

Answer 5

Возможно, в настройках вашего приложения проще установить флажок, чтобы пользователь мог переключать «внешняя клавиатура подключена?».

Мелким шрифтом объясните пользователю, что внешние клавиатуры в настоящее время не обнаруживаются в современных браузерах.

Answer 6

В браузере Safari, когда элемент расположен внизу экрана, а виртуальная клавиатура видна, эта позиция увеличивается примерно на 1 пиксель. Вы можете использовать это.

Предположим, это мобильное устройство в ландшафтном режиме

<div id="detector" style="position: absolute; bottom: 0"></div>

const detector = document.querySelector('#detector');
detector.getBoundingClientRect().bottom // 320

// when virtual keyboard is visible
detector.getBoundingClientRect().bottom // 329 or 328

Answer 7

Я не пытался сделать это сам, так что это всего лишь идея ... но вы пытались использовать медиа-запросы с CSS, чтобы увидеть, когда изменяется высота окна, а затем изменить дизайн для этого? Я полагаю, что Safari mobile не распознает клавиатуру как часть окна, поэтому, надеюсь, это сработает.

Пример:

@media all and (height: 200px){
    #content {height: 100px; overflow: hidden;}
}