Отключите подсветку выделения текста при касании на Mobile Safari/Webkit

У меня есть некоторые элементы на моем веб-сайте iPhone, в которых нет текста, но требуется, чтобы пользователь щелкнул и удерживал их (DIV). Это приводит к тому, что курсор/курсор выделения текста/редактирования отображается, что действительно отвлекает.

Я знаю, что есть правило CSS для удаления черного ящика, которое отображается на элементах, которые можно щелкнуть, когда они касаются. Есть ли что-нибудь подобное, чтобы отключить текстовую лупу?

Ответы

Ответ 1

Просто получил ответ от справочной службы Центра разработчиков. Мне нужно добавить это правило CSS:

-webkit-user-select: none;

Ответ 2

Используйте эти коды CSS

-webkit-touch-callout: none;
-webkit-user-select: none; /* Disable selection/copy in UIWebView */

Ответ 3

Это также полезно для защиты содержимого, которое вы не хотите копировать или сохранять, например изображения:

#yourdiv img {-webkit-touch-callout: none; }

Ответ 4

Я узнал это, когда сам это пробовал. Прежде всего, вы должны добавить это правило к охватывающему элементу:

-webkit-user-select: none;

Но этого, на самом деле, недостаточно на iPhone. Оказывается, увеличительное стекло все еще может появиться, потому что, например, родительский элемент будет принимать выделение или просто потому, что ему это нравится.

Однако я обнаружил что-то классное - если ваш элемент добавляет обработчик touchend и click к элементу, то Apple Safari, наконец, избегает раздражающего кода, который вызывает появление увеличительного стекла, возможно, понимая, что этот элемент предназначен для некоторого взаимодействия с пользовательским интерфейсом, а не для выбора текста. На одинаково замечательной заметке, если вы сделаете это на элементах в верхней части экрана, это также отменяет внешний вид навигации в ландшафтном режиме! Не уверен, однако, как отменить внешний вид навигации при нажатии на элементы внизу, есть ли у кого-нибудь решение для этого?

Ответ 5

Это разрешило это для меня, в JS:

document.getElementsByTagName("body")[0].addEventListener("touchstart",
 function(e) { e.returnValue = false });

Кажется, что обойти все, что есть в ОС, чтобы поймать прикосновение.

Ответ 6

Добавьте это в CSS

body {
-webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
-webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
-webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */}