Désactiver la loupe de mise en évidence du texte en cas de maintien du doigt sur Mobile Safari / Webkit

Question

J'ai quelques éléments dans mon site Web pour iPhone qui ne contiennent pas de texte mais qui nécessitent que l'utilisateur clique et maintienne la pression sur eux (DIVs). Cela fait apparaître la boucle/curseur de mise en évidence/édition du texte, ce qui est vraiment gênant.

Je sais qu'il existe une règle CSS permettant de supprimer la boîte noire qui s'affiche sur les éléments cliquables lorsqu'on les touche. Existe-t-il une règle similaire pour désactiver la loupe de texte ?

Answer 1

Je viens de recevoir une réponse du service d'assistance du centre des développeurs. J'avais besoin d'ajouter cette règle CSS :

-webkit-user-select: none;

Answer 2

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

Answer 3

Utilisez ces règles CSS :

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

Answer 4

Cette fonction est également utile pour protéger un contenu que vous ne voulez pas copier ou enregistrer, comme une image :

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

Answer 5

Cela a résolu le problème pour moi, en JS :

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

Ça semble contourner ce que le système d'exploitation a mis en place pour attraper le toucher.