Maison > interface Web > tutoriel CSS > le corps du texte

Comment rendre le texte non sélectionnable en HTML ?

DDD
Libérer: 2024-11-10 01:25:02
original
353 Les gens l'ont consulté

How to Make Text Unselectable in 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;
}
Copier après la connexion

Pour appliquer ce style, ajoutez la classe non sélectionnable à l'étiquette element :

<label class="unselectable">Unselectable label</label>
Copier après la connexion

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]);
    }
};
Copier après la connexion

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; };
            }
        }); 
    } 
});
Copier après la connexion

Ensuite, appliquez-le aux éléments d'étiquette :

$(document).ready(function() {
    $('label').disableSelection();            
});
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal