Deaktivieren Sie die Text-Hervorhebung Lupe auf Touch-Hold auf Mobile Safari/Webkit

Question

Ich habe einige Elemente in meiner iPhone-Website, die keinen Text in ihnen haben, aber erfordern den Benutzer zu klicken und auf sie (DIVs) zu halten. Dies führt dazu, dass die Textmarkierungs-/Bearbeitungsschleife/der Cursor angezeigt wird, was wirklich störend ist.

Ich weiß, dass es eine CSS-Regel zum Entfernen der Black-Box gibt, die auf anklickbaren Elementen angezeigt wird, wenn sie berührt werden. Gibt es so etwas, um die Textlupe zu deaktivieren?

Answer 1

Nur eine Antwort vom Helpdesk des Developer Center. Ich brauchte diese CSS-Regel hinzufügen:

-webkit-user-select: none; 

Answer 2

Dies gilt auch für den Schutz Inhalt nützlich ist, dass Sie nicht wollen, kopiert oder gespeichert, wie ein Bild:

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

Answer 3

ich das herausfand, bei dem Versuch, es selbst aus. Zunächst einmal müssen Sie diese Regel auf das umschließende Element hinzufügen:

-webkit-user-select: none; 

Aber das, für sich genommen, auf dem iPhone nicht genug. Es stellt sich heraus, dass die Lupe immer noch erscheinen kann, weil zum Beispiel ein Elternelement die Auswahl akzeptieren würde, oder nur weil es sich so anfühlt.

Allerdings habe ich dann etwas cooles entdeckt - wenn Ihr Element einen touchend und click Handler zu einem Element hinzufügt, dann Apples Safari schließlich vermeidet den lästigen Code-Pfad, der das Vergrößerungsglas erscheint, wahrscheinlich zu erkennen, dass dieses Element gemeint ist einige UI-Interaktion und nicht Text auswählen. Wenn Sie dies auf Elemente in der Nähe des oberen Bildschirmrands tun, wird auch die Darstellung der Navigation im Querformat deaktiviert. Nicht sicher, aber wie man das Aussehen der Navigation annulliert, wenn man auf Elemente auf der Unterseite klickt, hat jemand eine Lösung für dieses?

Answer 4

verwenden CSS-Codes

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

Answer 5

Dies löste es für mich, in JS:

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

Scheint zu umgehen, was das OS in es hat den Kontakt zu fangen.

Answer 6

diese

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