Мобильная форма и экранная клавиатура: проверка
Как проверить форму с открытой экранной клавиатурой: видимость поля, кнопки и ошибки, прокрутка, автозаполнение и возврат после отправки.
Форма может прекрасно помещаться на мобильном скриншоте и терять кнопку сразу после открытия клавиатуры. Проверка узкой ширины и проверка ввода — два разных действия. Начните со второго на настоящем телефоне.
У лендинга после AI-сборки обычно быстро проверяют первый экран. Но посетитель оставляет контакт ниже, где одновременно встречаются клавиатура, закреплённая кнопка и баннер согласия. Я бы принимал этот участок отдельным маршрутом с реальными данными по длине, используя разрешённый тестовый контакт.
Что меняется при открытии клавиатуры
На телефоне есть область раскладки страницы и фактически видимая область. Экранная клавиатура может уменьшать видимую часть, не меняя размеры раскладки тем же способом. MDN описывает VisualViewport как интерфейс для работы с видимой областью и отдельно упоминает экранную клавиатуру. Поведение зависит от браузера и настроек страницы.
Поэтому не пытайтесь лечить все случаи одной фиксированной высотой. Сначала воспроизведите проблему: какой элемент перекрылся, при каком поле, можно ли до него прокрутить и что происходит после закрытия клавиатуры. Разработчику нужен наблюдаемый сбой, а не требование «сделать как в приложении».
| Действие | Что увидеть | Что сохранить при сбое |
|---|---|---|
| Нажать первое и последнее поле | Виден ввод и понятно, где находишься | Устройство, браузер, поле |
| Ввести длинный контакт | Текст читается и исправляется | Длину и тип ввода без личных данных |
| Получить ошибку | Объяснение доступно рядом с полем | Положение ошибки и клавиатуры |
| Прокрутить до отправки | Кнопка достижима без потери ввода | Перекрывающий элемент |
| Закрыть клавиатуру | Страница возвращается к понятному виду | Оставшийся отступ или смещение |
Проверьте ввод, которым действительно пользуются
Попробуйте вставку контакта, автозаполнение и ручной ввод. У email нужна возможность набрать символы адреса, у телефона — исправить код и номер. Подходящий тип поля помогает открыть удобную клавиатуру, но не заменяет проверку значения. Не блокируйте вставку только ради одинакового форматирования.
Перейдите между полями кнопкой клавиатуры, если браузер её показывает. Посмотрите, не отправляет ли промежуточное действие форму раньше времени. Проверьте текстовую область с несколькими строками: её рост не должен делать последнее поле недостижимым. Затем поверните экран и убедитесь, что данные сохранились.
Уберите конкуренцию слоёв
Сравните форму без закреплённых элементов и с ними. Если проблему создаёт нижняя CTA-панель, определите её поведение во время ввода: скрывается, меняет положение или остаётся, сохраняя доступ к полям. Это продуктовое решение, которое проверяется целым сценарием. Поднятая выше кнопка не должна перекрыть текст ошибки.
У модального окна проверьте собственную прокрутку, закрытие и возврат фокуса. Если прокручивается только фон под окном, человек может видеть неподвижную форму и не понимать, как добраться до отправки. Клавиатурный маршрут дополняет проверка управления без мыши.
Примите успешный и неудачный путь
Отправьте корректную форму и проверьте итог. Потом в тестовом окружении получите ошибку и повторите попытку. Поля, подсказка и кнопка должны оставаться доступными в обоих случаях. Тексты состояний задаёт карта ошибок формы, а проверку исправления оформите по изменённому сценарию.
Сохраните устройство, браузер, версию страницы и выполненные действия. Такая запись позволяет повторить сбой. Один снимок без открытой клавиатуры подтверждает только вёрстку в момент, когда ввод ещё не начался.