Wyłączanie lupy z podświetlaniem tekstu w trybie zatrzymywania dotykowego w Mobile Safari/Webkit

Question

Mam pewne elementy na mojej stronie iPhone'a, które nie zawierają żadnego tekstu, ale wymagają od użytkownika kliknięcia i przytrzymania (DIV). Powoduje to pojawienie się podświetlenia tekstu/edycji pętli/kursora, co bardzo rozprasza uwagę.

Wiem, że istnieje reguła CSS do usuwania czarnej skrzynki, która pojawia się na klikalnych elementach, gdy są dotykane. Czy jest coś takiego, aby wyłączyć lupę tekstową?

Answer 1

Właśnie otrzymałem odpowiedź z Centrum pomocy dla programistów. Musiałem dodać tę regułę CSS:

-webkit-user-select: none; 

Answer 2

ta jest również przydatna w ochronie treści, które nie mają być kopiowane lub zapisywane, takich jak obraz:

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

Answer 3

Znalazłem się podczas próby ja sam. Przede wszystkim trzeba dodać tę regułę do elementu otaczającego:

-webkit-user-select: none; 

Ale to samo w sobie nie wystarcza na iPhone. Okazuje się, że szkło powiększające nadal może się pojawić, ponieważ na przykład element macierzysty zaakceptowałby wybór lub tylko dlatego, że mu się to podoba.

Jednak odkryłem coś fajnego - jeśli twój element dodaje element obsługi do elementu touchend i click, Safari firmy Apple ostatecznie unika irytującej ścieżki kodu, która powoduje pojawienie się lupy, prawdopodobnie zdając sobie sprawę, że ten element jest przeznaczony do niektóre interakcje interfejsu użytkownika i nie zaznaczanie tekstu. W równie niesamowitym tonie, jeśli zrobisz to na elementach w górnej części ekranu, spowoduje to również anulowanie wyglądu nawigacji w trybie poziomym! Nie wiesz jednak, jak anulować wygląd nawigacji po kliknięciu elementów na dole, czy ktoś ma rozwiązanie tego?

Answer 4

używać kodów tego CSS

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

Answer 5

to rozwiązać go dla mnie, w JS:

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

Wydaje się obejść bez względu na system operacyjny ma tam złapać w dotyku.

Answer 6

Dodaj to do 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' */}