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

J’ai sur mon site Web des éléments qui ne contiennent aucun texte, mais obligent l’utilisateur à cliquer dessus (DIVs). Cela fait apparaître la boucle / le curseur de mise en évidence / édition du texte, ce qui est vraiment gênant.

Je sais qu’il existe une règle CSS pour supprimer la boîte noire qui apparaît sur les éléments cliquables lorsqu’ils sont touchés. Y at-il quelque chose comme ça pour désactiver la loupe de texte?

Je viens de recevoir une réponse du service d’assistance du Centre de développement. Je devais append cette règle CSS:

-webkit-user-select: none; 

Utilisez ces codes CSS

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

Ceci est également utile pour protéger le contenu que vous ne souhaitez pas copier ou enregistrer, comme une image:

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

Je l’ai découvert en l’essayant moi-même. Tout d’abord, vous devez append cette règle à l’élément englobant:

 -webkit-user-select: none; 

Mais cela ne suffit pas en soi sur l’iPhone. Il se trouve que la loupe peut toujours apparaître car, par exemple, un élément parent accepterait la sélection ou simplement parce qu’il en a l’impression.

Cependant, j’ai découvert quelque chose de cool: si votre élément ajoute un gestionnaire de touchend et de click à un élément, Safari d’Apple évite finalement le chemin de code gênant qui fait apparaître la loupe. et ne pas sélectionner de texte. Sur une note tout aussi géniale, si vous faites cela sur des éléments en haut de l’écran, cela annulera également l’apparence de la navigation en mode paysage! Pas sûr cependant comment annuler l’apparence de la navigation en cliquant sur des éléments en bas, est-ce que quelqu’un a une solution pour celui-ci?

Cela l’a résolu pour moi, dans JS:

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

Semble ignorer tout ce que l’OS a là pour attraper le contact.

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