Не работает курсор в онлайн-форме на ios11 в Safari

Как настроить курсор на iOS 11 на онлайн-форме в Safari? Фиксирование в CSS или Bootstrap прыгающего курсора


У вас прыгает курсор при заполнении формы обратной связи на сайте с айфона? Тогда вам точно сюда! Делюсь дельным советом, что делать, если у вас на сайте не работает курсор в онлайн-форме на 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-файл стилей вашего сайта находим код, отвечающий за отображение только на мобильных экранах, например, такой:



И дописываем внутрь скобок такой код фиксированного позиционирования всплывающего окна формы обратной связи:



У вас должно получиться примерно так:



После внесения данного кода, мы получили, что наш фон, при открывании всплывающего окна «popup» формы обратной связи, зафиксировался и курсор прижался строго к нему и будет попадать строго на необходимые поля нашей онлайн-формы. Это должно сработать на айфоне на iOS 11, как в Safari, так и в Google Chrome.

 

Что делать, если это не помогло? Как тогда настроить курсор на iOS 11 на онлайн-форме в Safari?

2 способ. В таком случае можно попробовать более сложный код с привязкой к телу страницы сайта на Bootstrap. Например прописать в том же файле CSS уже такой код:



А также можно добавить еще такой код javascript в файл main.js или как ваш файл называется, где хранятся все скрипты сайта:



Код этот также можете добавить и в основной файл index сайта, конечно, не забыв обернуть этот код в теги <script></script>.

Как видно из вышеперечисленных CSS-классов, данные коды рассчитаны для сайта на Bootstrap. Однако, если ваш сайт писался вручную и все стили и верстку вы делали сами без Bootstrap-фреймворка, то вам лучше попробовать 3 способ, который описан ниже.

 

3 способ. Если вы не использовали Бустрап при создании сайта, в частности создании самой всплывающей формы обратной связи, а делали верстку сайта самостоятельно, то вы, наверняка, использовали скрипты jQuery + ваши CSS-стили для вашей модальной формы.

Собственно, в этом способе мы продолжим их использовать.

Для начала, попробуем просто прижать тело всплывающего окна формы к телу страницы, для этого добавим в ваш файл стилей style.css такой класс с фиксированным позиционированием:



Ну, а далее можете добавить этот новый класс вручную в ваш HTML-файл, где лежит код вашей popup формы в тег, который отвечает за появление всплывающего окна.

ЛИБО можете воспользоваться следующим JQuery-скриптом



Внимание! Если данный скрипт вы будете вставлять непосредственно в файл index или другой php или html-файл, то не забудьте обернуть его в теги <script></script>.

 

Всем спасибо за внимание! Я старалась пояснить максимально подробно, так как эта проблема нова и возникла только с появлениием iOS 11, а материала по этой тематике мало. Еще раз напоминаю мне подошел 1-й первый способ, напишите в комментариях, как способ подошел вам.

С уважением, копирайтер Валерия Романюк

Поделиться:


Оставьте комментарий