wake-up-neo.com

So deaktivieren Sie HTML-Text

Ich möchte meiner Webseite Text als Beschriftung hinzufügen und die Auswahl aufheben.

Mit anderen Worten, wenn sich der Mauszeiger über dem Text befindet, möchte ich, dass er überhaupt nicht zu einem Textauswahlcursor wird.

Ein gutes Beispiel dafür, was ich erreichen möchte, sind die Schaltflächen auf dieser Website (Fragen, Tags, Benutzer, ...).

165
Ben

Mit einfachem Vanilla-HTML ist dies nicht möglich, daher kann JSF auch hier nicht viel für Sie tun.

Wenn Sie nur auf anständige Browser zielen, nutzen Sie einfach 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>

Wenn Sie auch ältere Browser abdecken möchten, sollten Sie diesen JavaScript-Fallback in Betracht ziehen:

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

Wenn Sie bereits jQuery verwenden, dann ist hier ein weiteres Beispiel, das jQuery eine neue Funktion disableSelection() hinzufügt, damit Sie sie überall in Ihrem jQuery-Code verwenden können:

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

Niemand hat hier eine Antwort mit allen korrekten CSS-Variationen gepostet, also hier ist es:

-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

Die vollständige, moderne Lösung für Ihr Problem ist rein CSS-basiert. Beachten Sie jedoch, dass ältere Browser dies nicht unterstützen. In diesen Fällen müssen Sie auf Lösungen zurückgreifen, die von anderen bereitgestellt wurden.

Also in reinem CSS:

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

Der Mauszeiger ändert sich jedoch immer noch in eine Einfügemarke, wenn Sie sich über dem Text des Elements befinden. Fügen Sie also Folgendes hinzu:

cursor: default;

Modernes CSS ist ziemlich elegant.

51
Vic Goldfeld

Ich habe das oben veröffentlichte jQuery-Plugin so geändert, dass es mit Live-Elementen funktioniert.

(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);

Dann könnten Sie so etwas wie:

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

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