Обзор совместимости клавиатуры H5

внешний интерфейс

Обзор совместимости клавиатуры H5

В проектах H5 мы часто сталкиваемся с расположением одного или даже нескольких полей ввода/текстовой области и нижних фиксированных элементов на странице. Когда поле ввода ввода/текстовой области получает фокус, оно автоматически запускает всплывающую клавиатуру, но всплывающее окно клавиатуры не соответствует веб-просмотру ios и android, и есть также разница, когда мы активно запускаем клавиатуру свернуть. В любом случае, мы хотим, чтобы пользовательский интерфейс был как можно более последовательным, пока функция работает плавно, поэтому у нас есть следующая серия исследований проблем совместимости.

image.png

1. Различная производительность всплывающей клавиатуры

  • IOS: Клавиатура IOS находится в верхнем слое окна, когда клавиатура всплывает, высота веб-просмотра не меняется, но меняется scrollTop, и страницу можно прокручивать. А максимальная прокручиваемая страница — это высота всплывающей клавиатуры, и только при прокрутке страницы вниз при всплывающей клавиатуре значение изменения scrollTop — это высота клавиатуры, иначе его нельзя получить. Это затрудняет получение реальной высоты клавиатуры в случае с IOS.
  • Android: оставьте место в веб-просмотре, пространство меньше или равно пространству клавиатуры, разница в высоте изменения будет зависеть от макета, некоторые думают键盘高度 + 页面高度 = 原页面高度；неверно и вводит в заблуждение, эта формула может применяться только в некоторых очень случайных ситуациях компоновки.

2. Различная производительность втягивания клавиатуры

  • IOS: когда кнопка на клавиатуре срабатывает, чтобы закрыть клавиатуру или область страницы за пределами поля ввода, поле ввода потеряет фокус, поэтому будет запущено событие размытия поля ввода.
  • Android: когда кнопка на клавиатуре срабатывает, чтобы закрыть клавиатуру, поле ввода не теряет фокус, поэтому событие размытия страницы не срабатывает; когда срабатывает область за пределами поля ввода, поле ввода теряется сфокусируйтесь и вызовите событие размытия поля ввода.

3. Следите за всплывающими окнами и свертыванием клавиатуры

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

  • Всплывающее окно клавиатуры: когда поле ввода получает фокус, оно автоматически запускает действие всплывающей клавиатуры, поэтому мы можем прослушивать событие фокуса поля ввода и реализовать логику страницы, необходимую после всплывающей клавиатуры. Это ведет себя одинаково в ios и android.
  • Отвод клавиатуры: как видно из части 2, различные формы запуска отвода клавиатуры будут иметь различную производительность.При активации других областей страницы для отвода клавиатуры мы можем отслеживать событие размытия поля ввода и осознавать результат после убирание клавиатуры. необходимая логика страницы. Когда клавиатура убирается с помощью кнопки клавиатуры, есть разница в производительности между ios и android.Ниже приводится подробный анализ:
    • IOS: событие размытия поля ввода запускается, и оно по-прежнему отслеживается этим методом.
    • Android: событие размытия поля ввода не запускается. Но из Частей 1 и 2 мы можем узнать, что в Android переключение состояния клавиатуры (всплывающее окно, свертывание) не только связано с полем ввода, но также влияет на изменение высоты веб-просмотра, поэтому мы также может отслеживать изменение высоты веб-просмотра, чтобы определить, закрыта ли клавиатура.

Вот пример, где страница содержит поле ввода:

<div class="txd"> 
	Welcome to TXD!  
</div>
<div class="input">
	<input id="input" type="tel" />
</div>

Всплывающее окно клавиатуры iOS и Android:

const $input = document.getElementById('input');
$input.addEventListener('focus', () => {
	// 处理键盘弹出后所需的页面逻辑
}, false);

Клавиатура ios рухнула:

const $input = document.getElementById('input');
$input.addEventListener('blur', () => {
	// 处理键盘收起后所需的页面逻辑
}, false);

Клавиатура Android появляется и закрывается:

/*键盘弹起后页面高度变小*/
const originHeight = document.documentElement.clientHeight || document.body.clientHeight;
window.addEventListener('resize', () => {
	const resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
	if (resizeHeight < originHeight) {
		// 键盘弹起所后所需的页面逻辑
	} else {
		// 键盘弹起所后所需的页面逻辑
	}
}, false);

На практике, какой метод использовать, определяется путем оценки userAgent:

const ua = window.navigator.userAgent.toLocaleLowerCase();
const isIOS = /iphone|ipad|ipod/.test(ua);
const isAndroid = /android/.test(ua);

4. Варианты использования

Вот несколько распространенных сценариев, основанных на приведенном выше обсуждении:

(1) Головное и среднее поля ввода находятся в обычном потоке документов, а нижний элемент зафиксирован.

Клавиатура iOS скрыта на странице, высота страницы остается неизменными, страница может прокрутить, а нижний элемент скрыта;

Высота страницы андроида уменьшена, страницу нельзя прокручивать, а базовой линией нижнего атрибута фиксированного элемента является клавиатура;

(2) Заголовок и поле ввода находятся в обычном потоке документов, и занимаемая видимая область становится больше, а нижний элемент фиксируется.

Высота ios не изменилась, и страницу можно прокручивать;

Высота страницы андроида становится меньше, но для того, чтобы элементы обычного документооборота отображались нормально, страницу можно прокручивать вверх и вниз, а базовой линией нижнего атрибута фиксированного элемента является клавиатура;

(3) Головка находится в обычном потоке документов, а поле ввода находится вне нормального потока документов, фиксированное нижнее положение


(Для удобства наблюдения выше фон оборачивающего элемента поля ввода установлен на прозрачность)

Высота ios не изменилась, а поле ввода всегда гарантированно находится в видимой области;

Высота страницы андроида становится меньше, страницу нельзя прокручивать, а базовой линией нижнего атрибута фиксированного поля ввода является клавиатура;

5. Резюме

  1. В ios не важно какая раскладка, чтобы поле ввода отображалось в видимой области, при всплытии клавиатуры страница будет прокручиваться вверх.Прокрутка в видимую область окна браузера) выдает одно и то же эффекта; высота остается прежней, а страницу можно прокручивать.
  2. В андроиде после пробуждения клавиатуры возможность прокрутки страницы определяется ее элементами в обычном потоке документов: если элементы в обычном потоке документов могут отображаться полностью, страница не может быть прокручена, иначе страница поддерживает прокрутка;
  3. В Android после вызова клавиатуры ссылка на фиксированный элемент изменится: элемент, расположенный в соответствии с нижним положением, изменится на верхнюю часть клавиатуры; элемент, расположенный в соответствии с верхним, по-прежнему соответствует верхней части страницы, поэтому чтобы позаботиться о нормальном потоке документов и взаимодействии с пользователем фиксированного элемента, некоторые элементы можно расположить в соответствии с верхним положением, а некоторые — в соответствии с нижним.

Гораздо проще решать проблемы совместимости, когда вы понимаете всплывающую природу клавиатуры в h5. В то же время вы также можете использовать метод Element.scrollIntoViewIfNeeded() для решения проблем (например, при переключении между различными методами ввода, что может привести к блокировке полезной информации) для оптимизации работы.

image.png

Категории