Как отследить появление клавиатуры?

Отслеживание появления экранной клавиатуры — ключевая задача для создания удобных мобильных интерфейсов. Когда пользователь тапает по полю ввода, система показывает клавиатуру, что изменяет область просмотра контента. Прямого события "keyboardshow" в вебе нет, поэтому разработчики используют косвенные методы.

Основные подходы к отслеживанию

Самый надёжный современный способ — использование Visual Viewport API. Визуальный вьюпорт представляет собой часть окна, которая сейчас отображается на экране (исключая области, перекрытые клавиатурой).

// Пример с использованием Visual Viewport API
if (window.visualViewport) {
  window.visualViewport.addEventListener('resize', function(event) {
    const newHeight = event.target.height;
    const windowHeight = window.innerHeight;
    // Если высота визуального вьюпорта значительно меньше высоты окна,
    // вероятно, клавиатура открыта
    if (newHeight < windowHeight * 0.7) {
      console.log('Клавиатура, вероятно, появилась');
      // Здесь можно, например, прокрутить поле ввода в видимую область
    } else {
      console.log('Клавиатура, вероятно, скрыта');
    }
  });
}

Альтернативные и традиционные методы

• Событие resize на window: На многих мобильных браузерах появление клавиатуры вызывает событие resize основного окна. Однако это поведение не стандартизировано и может приводить к ложным срабатываниям.
• Отслеживание фокуса: Можно слушать события focus и blur на полях ввода. Появление клавиатуры обычно следует сразу за focus. Это не даёт информации о точных размерах, но указывает на контекст.
• Проверка активного элемента: Сочетание document.activeElement (который указывает на поле ввода) и изменения размеров окна даёт более точную картину.

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

Вывод: Используйте Visual Viewport API для наиболее точного и современного отслеживания изменения области просмотра из-за клавиатуры, особенно когда критично точно знать оставшееся пространство для адаптации UI.