Comment rendre le texte HTML non sélectionnable

Je voudrais append du texte à ma page Web en tant qu’étiquette et le rendre non sélectionnable.

En d’autres termes, lorsque le curseur de la souris est sur le texte, j’aimerais qu’il ne devienne pas du tout un curseur de sélection de texte.

Les boutons de ce site Web (Questions, Tags, Utilisateurs, …) sont un bon exemple de ce que j’essaie de réaliser.

Vous ne pouvez pas faire cela avec du code HTML simple, donc JSF ne peut pas faire grand chose pour vous ici aussi.

Si vous ciblez uniquement des navigateurs décents , utilisez simplement CSS3:

.unselectable { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } 
  

Si vous souhaitez également couvrir les anciens navigateurs, considérez cette solution de secours JavaScript:

    SO question 2310734       

Si vous utilisez déjà jQuery , voici un autre exemple qui ajoute une nouvelle fonction disableSelection() à jQuery pour que vous puissiez l'utiliser n'importe où dans votre code jQuery:

    SO question 2310734 with jQuery        

Personne ici n’a posté une réponse avec toutes les variations CSS correctes, alors la voici:

 -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; 

La solution moderne à votre problème est purement basée sur CSS, mais notez que les navigateurs plus anciens ne le prendront pas en charge, auquel cas vous devrez recourir à des solutions telles que les autres.

Donc en pur CSS:

 -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; 

Cependant, le curseur de la souris se transforme toujours en caret lorsque vous survolez le texte de l’élément, vous ajoutez donc à cela:

 cursor: default; 

Le CSS moderne est assez élégant.

J’ai modifié le plug-in jQuery publié ci-dessus pour qu’il fonctionne sur les éléments en direct.

 (function ($) { $.fn.disableSelection = function () { return this.each(function () { if (typeof this.onselectstart != 'undefined') { this.onselectstart = function() { return false; }; } else if (typeof this.style.MozUserSelect != 'undefined') { this.style.MozUserSelect = 'none'; } else { this.onmousedown = function() { return false; }; } }); }; })(jQuery); 

Alors vous pourriez alors quelque chose comme:

 $(document).ready(function() { $('label').disableSelection(); // Or to make everything unselectable $('*').disableSelection(); });