У вас прыгает курсор при заполнении формы обратной связи на сайте с айфона? Тогда вам точно сюда! Делюсь дельным советом, что делать, если у вас на сайте не работает курсор в онлайн-форме на iOS 11 в Safari.
Cursor doesn’t work in online form Safari iOS 11, что делать?
Вы, наверное, уже успели заметить, что после обновления iOS до версии 11 появились некоторые баги с сайтами в мобильных версиях при отображении их на iPhone. Например, зайдя на ваш сайт или блог со смартфона и нажав купить, заказать или любую другую кнопку, которая у вас активирует модальное окно онлайн-формы обратной связи, откроется окно формы, но курсор, чтобы заполнить поля формы, вы нормально поставить не сможете. Это касается особенно сайтов, которые используют популярный css-фрейворк Bootstrap.
Более наглядно, как выглядит проблема с прыгающим курсором
Это все стало происходить из-за недавних изменений в коде самой операционной системы iOS 11, которые теперь стали конфликтовать с кодом еще не обновленного Bootstrap или вашего кода СSS, в котором еще не учтено, что тело модального окна необходимо теперь умышленно фиксировать в CSS. Ну, я думаю, разработчики поняли о чем я, и уже могут дальше не читать статью, а идти в код и прописывать фиксированное позиционирование для модального окна формы. Для все остальных рекомендую пробовать следующие примеры ниже.
Что делать, если прыгает курсор на форме обратной связи на сайте в мобильной версии?
Если вы еще не проходили курсы по верстке HTML/CSS, возможно, вам будет сложно, поэтому перед началом работы посмотрите бесплатные или платные курсы/уроки по верстке сайтов (рекомендую вот это https://kurshub.ru/luchshie-kursy-po-verstke-sajtov/)
1 способ. Самый простой, особенно подходит для сайтов на Bootstrap.
Мне именно он и помог настроить курсор на iOS 11 в Safari и Google Chrome в онлайн-форме на сайте.
Заходим в основной CSS-файл стилей вашего сайта находим код, отвечающий за отображение только на мобильных экранах, например, такой:
|
1
2
|
@media(max-width:767px) {
}
|
И дописываем внутрь скобок такой код фиксированного позиционирования всплывающего окна формы обратной связи:
|
1
2
3
|
.modal-open {
position: fixed!important;
}
|
У вас должно получиться примерно так:
|
1
2
3
4
5
|
@media(max-width:767px) {
.modal-open {
position: fixed!important;
}
}
|
После внесения данного кода, мы получили, что наш фон, при открывании всплывающего окна «popup» формы обратной связи, зафиксировался и курсор прижался строго к нему и будет попадать строго на необходимые поля нашей онлайн-формы. Это должно сработать на айфоне на iOS 11, как в Safari, так и в Google Chrome.
Что делать, если это не помогло? Как тогда настроить курсор на iOS 11 на онлайн-форме в Safari?
2 способ. В таком случае можно попробовать более сложный код с привязкой к телу страницы сайта на Bootstrap. Например прописать в том же файле CSS уже такой код:
|
1
2
3
4
|
body.modal-open {
position: fixed;
width: 100%;
}
|
А также можно добавить еще такой код javascript в файл main.js или как ваш файл называется, где хранятся все скрипты сайта:
|
1
2
3
4
5
6
7
8
9
|
var savedScrollPosition;
$(document).on('show.bs.modal', '.modal', function() {
savedScrollPosition = $(window).scrollTop();
});
$(document).on('hidden.bs.modal', '.modal', function() {
window.scrollTo(0, savedScrollPosition);
});
|
Код этот также можете добавить и в основной файл index сайта, конечно, не забыв обернуть этот код в теги <script></script>.
Как видно из вышеперечисленных CSS-классов, данные коды рассчитаны для сайта на Bootstrap. Однако, если ваш сайт писался вручную и все стили и верстку вы делали сами без Bootstrap-фреймворка, то вам лучше попробовать 3 способ, который описан ниже.
3 способ. Если вы не использовали Бустрап при создании сайта, в частности создании самой всплывающей формы обратной связи, а делали верстку сайта самостоятельно, то вы, наверняка, использовали скрипты jQuery + ваши CSS-стили для вашей модальной формы.
Собственно, в этом способе мы продолжим их использовать.
Для начала, попробуем просто прижать тело всплывающего окна формы к телу страницы, для этого добавим в ваш файл стилей style.css такой класс с фиксированным позиционированием:
|
1
2
3
|
body.has-fullscreen-modal {
position: fixed;
}
|
Ну, а далее можете добавить этот новый класс вручную в ваш HTML-файл, где лежит код вашей popup формы в тег, который отвечает за появление всплывающего окна.
ЛИБО можете воспользоваться следующим JQuery-скриптом
|
1
2
3
4
5
|
var savedScrollPosition = $(window).scrollTop()
$('body').addClass('has-fullscreen-modal')
$('body').removeClass('has-fullscreen-modal')
window.scrollTo(0, savedScrollPosition)
|
Внимание! Если данный скрипт вы будете вставлять непосредственно в файл index или другой php или html-файл, то не забудьте обернуть его в теги <script></script>.
Всем спасибо за внимание! Я старалась пояснить максимально подробно, так как эта проблема нова и возникла только с появлениием iOS 11, а материала по этой тематике мало. Еще раз напоминаю мне подошел 1-й первый способ, напишите в комментариях, как способ подошел вам.
С уважением, копирайтер Валерия Романюк
