web-dev-qa-db-fra.com

Pourquoi .disableSelection () est-il déconseillé?

.disableSelection dans JQueryUI 1.9 est obsolète. La seule explication que je puisse trouver est, littéralement, "Désactiver la sélection de texte est mauvais. Ne l'utilisez pas." et "Nous ne devrions pas laisser les développeurs gâcher la sélection de texte. C'était à l'origine pour les plugins d'interaction, mais ils gèrent tous la sélection de texte correctement par eux-mêmes à ce stade."

Puisqu'aucune alternative n'est suggérée, je suppose qu'ils signifient que c'est toujours mauvais, mais je ne peux pas en comprendre les raisons. Un double/triple clic ou une sélection dénuée de sens d'une application à interface utilisateur élaborée applique incorrectement l'effet de surbrillance de texte et (pour moi) supprime instantanément l'illusion d'une expérience utilisateur robuste.

Les applications de bureau n'en souffrent pas! Les boutons et autres commandes dans un environnement de bureau sont des zones de pixels qui semblent solides et agissent de manière intuitive, peu importe ce que vous leur faites (ou elles sont cassées). Le fait que les applications Web soient composées de boîtes html complexes, d'arrière-plans, de bordures et d'images (l'analogue Web des pixels) n'est pas une raison pour trahir l'illusion que les éléments d'écran avec lesquels nous interagissons ne sont pas un objet physique atomique.

Dans l'image ci-dessous, une partie du texte devrait pouvoir être sélectionnée, comme les paragraphes de texte dans les panneaux qui pourraient être des données d'application. Mais pour certaines applications, il serait raisonnable de choisir la conception, de ne pas sélectionner d'autres parties, telles que le texte des boutons, des tabulations, des en-têtes d'accordéon et du texte situé derrière les boîtes de dialogue modales. Cela s’applique en particulier aux types de comportement pouvant être déplacé/trié.

jQuery UI Themeroller, with a region selected

1) Est-ce que j'interprète mal leur décision? La recommandation est-elle plus spécifique à JQuery que je ne le réalise?

2) S'il s'agit d'un énoncé général indiquant que le texte devrait toujours pouvoir être sélectionné de cette manière, veuillez expliquer plus en détail pourquoi.

3) Si je le faisais de toute façon, quel est le plus performant, le plus complet, le plus respectueux, le multi-navigateur et le plus accessible pour tout le monde maintenant que disableSelection est obsolète?

jquery-uitextselection
40
Jason Kleban

Vous pouvez utiliser CSS pour cela dans la plupart des navigateurs: http://jsfiddle.net/fQthQ/

* {
   -ms-user-select: none; /* IE 10+ */
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   user-select: none;
}

.selectable {
   -ms-user-select: auto;
   -moz-user-select: auto;
   -khtml-user-select: auto;
   -webkit-user-select: auto;
   user-select: auto;
}

Opera ne prend actuellement pas en charge cette fonctionnalité.

Voir la page MDN pour plus d'informations: https://developer.mozilla.org/en-US/docs/CSS/user-select

29
Shmiddty

Un cas concret dans lequel il est utile de désactiver la sélection de texte est un élément <ul> dont les <li> ont été programmés pour pouvoir être déplacés (pour le tri). Le glissement fonctionne correctement, sauf que le texte est sélectionné pendant le glissement de l'utilisateur. C’est sûrement une utilisation légitime de disableSelection ().

Je sais que cela peut être fait sans cette méthode (sinon, il serait impossible pour la méthode de le faire en premier lieu); mais la raison pour laquelle j'ai voulu utiliser disableSelection () est d'exprimer de manière concise mon désir dans un seul endroit et de laisser jQuery-UI gérer mes problèmes de compatibilité entre navigateurs au lieu de devoir utiliser une combinaison de plusieurs règles CSS et de JS (pour IE7) .

Je pense que cette fonctionnalité est obsolète parce que des sites Web qui désactivent la sélection ont agacé quelqu'un et ont décidé qu'il ne fallait pas encourager cette pratique. C'est comme si un programmeur Web refusait de prendre en charge les navigateurs traditionnels, car ils ne souhaitaient pas encourager leur utilisation. Un tel programmeur serait licencié, mais vous pouvez vous en sortir imposer votre philosophie aux autres lorsque vous avez le pouvoir sur une bibliothèque populaire. En déconseillant cette fonctionnalité, les programmeurs qui souhaitent désactiver la sélection perdent leur temps à chercher une méthode alternative. En punissant les malfaiteurs, jQuery-UI les fera probablement changer, et notre société ne sera pas inondée de sites Web qui désactivent la sélection. Donc, vous voyez, il y a une rationalisation parfaite, et celui qui écrit: "Désactiver la sélection de texte est mauvais. Ne l'utilisez pas." dans la documentation officielle peut se considérer comme héroïque. Nous sommes les méchants ici.

5
Vladimir Kornea

En guise d'alternative à la technique CSS user-select: none;, je pense que simplement empêcher le comportement par défaut lors d'un double-clic ou d'un mousedown via $(document).on('dblclick mousedown', '.prevent-select', false); présente certains avantages:

  1. Permet toujours la sélection de texte, si l'utilisateur veut faire glisser le curseur autour les éléments. Empêche simplement la sélection de texte ennuyeuse lorsque l'utilisateur clique rapidement.
  2. Meilleur support du navigateur.
  3. Non déconseillé par l'équipe jQuery (pas de regard maléfique lors de l'examen du code.)
0
Jordan Rieger

Je suis tout à fait d'accord avec @WesleyMurch, j'aimerais pouvoir vous donner plus de +1. Je pense aussi que, JS ne devrait pas être la voie à suivre, css pourrait être meilleur pour cela ..., 

Si vous avez besoin de la sélection pour basculer (dans certains cas, si dynamique), vous pouvez utiliser jquery pour basculer entre les classes (anciens navigateurs IE), vous pouvez demander ???

C'est un bon moyen (outil subtil) de décourager les gens de continuer à utiliser OLD I.E. à cause des choses qu'ils manquent.

http://caniuse.com/#search=user-select

(Bien que IE 8/9 [du nombre d'utilisateurs dans la perspective%] soit un grand nombre mais cela dépend de combien vous vous souciez vraiment)

J'utiliserais l'option CSS comme l'explique @Shmiddty, mais peut-être, activé pour commencer et désactiver au fur et à mesure, mais c'est tout simplement mon avis :) 

0
Val