Comment empêcher la sélection de texte dans les étiquettes HTML ?

Comment empêcher efficacement la sélection de texte en HTML

Lors de la création d'une page Web, vous pouvez rencontrer le besoin d'ajouter des étiquettes qui ne sont pas sélectionnables par défaut. Cela peut être particulièrement utile pour les boutons ou les éléments de navigation dont vous ne souhaitez pas que le texte soit copié ou mis en surbrillance.

Solution basée sur CSS (navigateurs modernes)

Pour les navigateurs modernes prenant en charge CSS3 , vous pouvez utiliser les styles suivants :

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

Appliquer cette classe à l'étiquette element :

<label class="unselectable">Unselectable Label</label>

JavaScript Fallback (anciens navigateurs)

Pour les navigateurs plus anciens qui ne prennent pas en charge CSS3, vous pouvez utiliser JavaScript pour désactiver la sélection de texte :

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; };
    }
}

disableSelection(document.querySelector("label"));

Ceci La fonction JavaScript parcourt toutes les étiquettes de la page et applique les gestionnaires d'événements appropriés pour désactiver la sélection.

jQuery Solution

Si vous utilisez jQuery, vous pouvez étendre la bibliothèque jQuery avec le code suivant :

$.fn.disableSelection = function() { 
    this.each(function() {  
        disableSelection(this);
    }); 
};

Ensuite, vous pouvez désactiver la sélection sur toutes les étiquettes comme ceci :

$("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!