Comment rendre le texte non sélectionnable en HTML ?

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!