Comment rendre un texte HTML non sélectionnable : une explication détaillée
La question se pose : comment rendre le texte d'une page Web non sélectionnable, empêchant le curseur de passer à un curseur de sélection de texte lors du survol. Ce comportement est généralement observé sur les boutons, tels que ceux trouvés sur le site Stack Overflow.
Solution CSS3
Pour les navigateurs modernes, une solution CSS3 suffit :
.unselectable { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
Pour appliquer ce style, ajoutez la classe non sélectionnable à l'étiquette element :
<label class="unselectable">Unselectable label</label>
JavaScript Fallback
Pour les navigateurs plus anciens, une solution de repli JavaScript est nécessaire :
function disableSelection(element) { if (typeof element.onselectstart != 'undefined') { element.onselectstart = function() { return false; }; } else if (typeof element.style.MozUserSelect != 'undefined') { element.style.MozUserSelect = 'none'; } else { element.onmousedown = function() { return false; }; } } window.onload = function() { var labels = document.getElementsByTagName('label'); for (var i = 0; i < labels.length; i++) { disableSelection(labels[i]); } };
Solution jQuery
Si jQuery est utilisé, étendez la méthode DisableSelection() function :
$.fn.extend({ disableSelection: function() { 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; }; } }); } });
Ensuite, appliquez-le aux éléments d'étiquette :
$(document).ready(function() { $('label').disableSelection(); });
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!