Как предотвратить сдвижение вьюхи в iOS при появлении клавиатуры с помощью CSS или JS
У меня есть адаптивная веб-страница, которая открывает модальное окно при нажатии кнопки. Когда модальное окно открывается, оно устанавливается на полный экран (ширина и высота) с помощью фиксированного позиционирования. В модальном окне также есть поле ввода.
На устройствах iOS, когда фокусируется поле ввода, клавиатура открывается. Однако, когда она открывается, это на самом деле сдвигает весь документ вверх так, что половина моей страницы уходит выше верхней границы области просмотра. Я могу подтвердить, что сам тег <html> действительно был поднят, чтобы компенсировать клавиатуру, и это не произошло из-за CSS или JavaScript.
Кто-нибудь сталкивался с этой проблемой? Если да, есть ли способ предотвратить это или переместить элементы после того, как клавиатура открылась? Это проблема, потому что мне нужно, чтобы пользователи могли видеть содержимое вверху модального окна, в то время как одновременно я хотел бы автофокусировать поле ввода.
4 ответ(ов)
Первый код устанавливает обработчик на событие ontouchmove, который предотвращает прокрутку страницы при касании. Это может быть полезно, например, чтобы избежать нежелательного перемещения страницы при взаимодействии с элементами управления на сенсорном экране.
Вот как этот код выглядит:
<script type="text/javascript">
$(document).ready(function() {
document.ontouchmove = function(e){
e.preventDefault();
}
});
</script>
Второй фрагмент кода привязывает обработчик к событию получения фокуса элемента input. Когда input получает фокус, страница прокручивается вверх. Это может быть полезно для того, чтобы вводимые данные в поле ввода были более видимыми, особенно на мобильных устройствах.
Вот как это выглядит:
input.onfocus = function () {
window.scrollTo(0, 0);
document.body.scrollTop = 0;
}
В итоге оба кода работают вместе, чтобы улучшить взаимодействие пользователя с формами на мобильных устройствах, предотвращая случайную прокрутку и обеспечивая, что нужный элемент будет в пределах видимости.
Если кто-то столкнулся с этой проблемой в React, я смог её решить, адаптировав решение от @ankurJos следующим образом:
const inputElement = useRef(null);
useEffect(() => {
inputElement.current.onfocus = () => {
window.scrollTo(0, 0);
document.body.scrollTop = 0;
};
});
<input ref={inputElement} />
Эта реализация устанавливает обработчик события onfocus для элемента ввода, который прокручивает страницу вверх при получении фокуса. Не забудьте подключить необходимые хуки из React!
Оказывается, всё, что вам нужно сделать — это добавить
position: fixed;
в тег <body>. Это позволит телу страницы сдвигаться вниз, когда виртуальная клавиатура скрывается.
Вы также можете сделать это, если не хотите прокручивать к верху страницы (0, 0):
window.scrollBy(0, 0);
Этот код фактически не изменит положение прокрутки, так как он добавляет (0, 0) к текущей позиции. Используйте это, если вам нужно вызвать событие прокрутки без перемещения страницы.
Добавить подсказку к элементу div
Высота, равная динамической ширине (флюидная верстка на CSS)
Несколько файлов JavaScript/CSS: лучшие практики?
Как получить границы элемента div в jQuery
Обнаружение iOS Chrome