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

Question

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

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

Answer 1

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

-webkit-user-select: none;

Answer 2

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

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

Answer 3

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

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

Answer 4

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

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

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

Answer 5

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

-webkit-user-select: none;

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

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

Answer 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' */}