Deaktivieren Sie das text-highlighting Lupe auf touch-hold on Mobile Safari / Webkit

Ich habe einige Elemente in meine iPhone-website, die haben keinen text, sondern Sie erfordern, dass der Benutzer klicken Sie auf und halten Sie (DIVs). Dies bewirkt, dass das text-highlighting/Bearbeiten loop/cursor, um zu zeigen, das ist wirklich störend.

Ich weiß, es ist eine CSS-Regel für das entfernen der black-box, die zeigt, dass bis auf klickbaren Elementen, wenn Sie berührt werden. Gibt es etwas wie, dass zum deaktivieren der text-Lupe?

Möglich, Duplikat der IOs-Cordova lange drücken zeigt text-wählen Sie die Lupe auch mit der text-Auswahl deaktiviert, wie entfernen?

InformationsquelleAutor 3n. | 2009-05-28

  1. 49

    Habe gerade eine Antwort von der Developer Center-Helpdesk. Ich brauchte zum hinzufügen dieser CSS-Regel: 

    -webkit-user-select: none;
    Funktioniert nicht in der Phonegap-Anwendung, ich habe diese auf jedes div in meinem html.
    dies versucht, aber nicht geklappt
    Ja, dies funktioniert nicht. Sollte downvoted auf 0.

    InformationsquelleAutor 3n.

  2. 6

    Verwenden Sie dieses CSS-codes

    -webkit-touch-callout: none;
-webkit-user-select: none; /* Disable selection/copy in UIWebView */
    Einige Erklärungen?

    InformationsquelleAutor vitralyoz

  3. 5

    Dies ist auch sinnvoll, in den Schutz der Inhalte, die Sie wollen nicht kopiert oder gespeichert wird, wie ein Bild:

    #yourdiv img { -webkit-touch-callout: none; }
    Ich hoffe, du meinst mit schützen es etwas umständlicher zu kopieren.

    InformationsquelleAutor Jay from BKK

  4. 4

    Diese löste es für mich, JS:

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

    Scheint, zu umgehen, was auch immer das OS hat dort zu fangen, die berühren.

    dies schien zu deaktivieren "klicken Sie auf" Ereignisse, die ich gesetzt hatte
    Um das click-Ereignis, die alternative wäre der call/auslösen des click-Ereignisses der 'touchStart', sogar handler.

    InformationsquelleAutor andrwct

  5. 3

    Ich fand diese heraus, während Sie versuchen, es aus mir selbst. Zunächst müssen Sie diese Regel, um die umschließenden element:

    -webkit-user-select: none;

    Aber, das durch sich selbst ist nicht genug, auf dem iPhone. Es stellt sich heraus, dass die Lupe kann immer noch erscheinen, zum Beispiel weil Sie ein übergeordnetes element akzeptiert, die Auswahl, oder einfach nur, weil es fühlt sich an wie es.

    Aber dann entdeckte ich etwas, das cool - wenn Ihr element fügt eine touchend und click - handler an ein element, dann Apple Safari, schließlich vermeidet das lästige code-Pfad, der bewirkt, dass die Lupe zu erscheinen, wohl ahnend, dass dieses element bedeutete für einige UI-Interaktion, und nicht das auswählen von text. Auf eine ebenso awesome note, wenn Sie diese auf die Elemente in der Nähe des oberen Rand des Bildschirms, wird es auch Abbrechen, das Aussehen der navigation im landscape-Modus! Nicht sicher, jedoch, wie Sie das Aussehen der navigation beim Klick auf die Elemente auf der Unterseite, hat jemand eine Lösung für?

    Genial Forschung. Dies ist ein häufiges Problem für einige Zeit. Es scheint einige Menschen gefunden, die solution. Dies ist aber nicht die Lösung während der Verwendung nur an javascript / css.

    InformationsquelleAutor Gregory Magarshak

  6. 2

    Fügen Sie diese an die 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' */}

    InformationsquelleAutor Pham Van Vung

Schreibe einen Kommentar