web-dev-qa-db-fra.com

Comment rendre le texte HTML non sélectionnable

J'aimerais ajouter du texte à ma page Web en tant qu'étiquette et le rendre non sélectionnable.

En d'autres termes, lorsque le curseur de la souris se trouve sur le texte, j'aimerais qu'il ne devienne pas du tout un curseur de sélection de texte.

Un bon exemple de ce que j'essaye de réaliser est les boutons sur ce site (Questions, Tags, Utilisateurs, ...)

htmlcsscross-browserhighlightingtextselection
165
Ben

Vous ne pouvez pas faire cela avec HTML à la vanille, donc JSF ne peut pas vous en dire plus ici.

Si vous ciblez navigateurs corrects seulement, utilisez simplement 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;
}

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

Si vous souhaitez également couvrir les anciens navigateurs, envisagez cette solution de secours JavaScript:

<!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>

Si vous utilisez déjà jQuery , voici un autre exemple qui ajoute une nouvelle fonction disableSelection() à jQuery afin que vous puissiez l'utiliser n'importe où dans votre code jQuery:

<!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>
234
BalusC

Personne ici n’a posté de réponse avec toutes les variations CSS correctes, donc la voici:

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
167
Blowsie

La solution moderne complète à votre problème est purement basée sur CSS, mais notez que les navigateurs plus anciens ne la supporteront pas, dans quels cas vous auriez besoin de recourir à des solutions telles que celles proposées par les autres.

Donc, en CSS pur:

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;

Cependant, le curseur de la souris deviendra toujours un signe d'insertion lorsque vous survolerez le texte de l'élément. Vous y ajouterez donc:

cursor: default;

Le CSS moderne est assez élégant.

51
Vic Goldfeld

J'ai modifié le plugin jQuery posté ci-dessus pour qu'il fonctionne avec les éléments en direct.

(function ($) {
$.fn.disableSelection = function () {
    return 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; };
        }
    });
};
})(jQuery);

Vous pourriez alors avoir quelque chose comme:

$(document).ready(function() {
    $('label').disableSelection();

    // Or to make everything unselectable
    $('*').disableSelection();
});
10
Steve