Comment désactiver la sélection de texte en HTML ?

Texte HTML non sélectionnable : au-delà du HTML Vanilla

Bien que le HTML simple ne puisse à lui seul empêcher la sélection de texte, diverses techniques peuvent être utilisées pour surmonter cette limitation. L'une de ces méthodes consiste à exploiter 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;
}

L'intégration de ce style dans l'élément HTML désactive la sélection de texte :

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

Pour une compatibilité plus large avec les navigateurs, une solution de secours JavaScript peut être envisagée :

<label onselectstart="return false;">Unselectable label</label>

Dans les cas où plusieurs étiquettes nécessitent cette fonctionnalité, une fonction JavaScript générique peut être utilisée pour parcourir et désactiver selection :

var labels = document.getElementsByTagName('label');
for (var i = 0; i < labels.length; i++) {
    disableSelection(labels[i]);
}
 
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; };
    }
}

Alternativement, avec jQuery intégré, une fonction "disableSelection()" peut être ajoutée pour simplifier le processus :

<label>Try to select this</label>

<script>
    $.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; };
                }
            }); 
        } 
    });

    $(document).ready(function() {
        $('label').disableSelection();            
    });
</script>

Ces méthodes désactivent efficacement la sélection de texte, empêchant ainsi la l'utilisateur de sélectionner et de perturber par inadvertance la fonctionnalité de la page Web.

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!