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 l'ai découvert en l'essayant moi-même. Tout d'abord, vous devez ajouter cette règle à l'élément qui l'entoure :

-webkit-user-select: none;

Mais cela, en soi, ne suffit pas sur l'iPhone. Il s'avère que la loupe peut tout de même apparaître parce que, par exemple, un élément parent accepterait la sélection, ou simplement parce qu'on en a envie.

Cependant, j'ai ensuite découvert quelque chose de cool - si votre élément ajoute un touchend y click à un élément, Safari d'Apple évite enfin le chemin de code ennuyeux qui provoque l'apparition de la loupe, réalisant probablement que cet élément est destiné à une interaction avec l'interface utilisateur, et non à la sélection de texte. Dans un autre ordre d'idées, si vous faites cela sur les éléments situés près du haut de l'écran, cela annulera également l'apparition de la navigation en mode paysage ! Je ne sais cependant pas comment annuler l'apparition de la navigation lorsque l'on clique sur des éléments situés en bas de l'écran, quelqu'un a-t-il une solution pour cela ?

Answer 2

Sur IOS 15.2 -webkit-user-select: none; a réglé le problème, mais seulement partiellement.

Une pression longue n'affiche plus la loupe. Cependant, si vous effectuez un double appui prolongé, elle apparaît toujours comme par magie.

Il n'y a toujours pas de moyen fiable à 100% sauf event.preventDefault sur le démarrage par contact. Mais cela bloque également les actions sous-jacentes, de sorte que des éléments tels que les boutons avec des infobulles à pression longue sont interrompus. Par conséquent, ce n'est pas toujours une option...