Comment empêcher le texte HTML d'être sélectionnable ?-tutoriel CSS-php.cn

Comment empêcher le texte HTML d'être sélectionnable ?

Linda Hamilton

Libérer： 2024-11-10 09:49:02

original

589 Les gens l'ont consulté

How to Prevent HTML Text from Being Selectable?

Comment empêcher le texte HTML d'être sélectionnable

Si vous souhaitez intégrer du texte dans votre page Web en tant qu'étiquette et désactiver sa sélection, empêchez le curseur de la souris ne se transforme pas en curseur de sélection de texte lorsque vous survolez le texte.

Solution CSS3 :

Si vous ciblez des navigateurs modernes, utilisez 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;
}

Copier après la connexion

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

Copier après la connexion

JavaScript Fallback :

Pour les navigateurs plus anciens, une méthode de secours JavaScript peut être utilisée :

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2310734</title>
        <script>
            window.onload = function() {
                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; };
                }
            }
        </script>
    </head>
    <body>
        <label>Try to select this</label>
    </body>
</html>

Copier après la connexion

Solution jQuery :

Si jQuery est utilisé, étendez ses fonctionnalités avec le code suivant :

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2310734 with jQuery</title>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <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>
    </head>
    <body>
        <label>Try to select this</label>
    </body>
</html>

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!