Wie machen HTML-Text unselectable [Duplikat]

StackOverflow https://stackoverflow.com/questions/2310734

Frage

    

Diese Frage bereits eine Antwort hier:

    
            
  •              Wie deaktivieren Textauswahl hervorgehoben                                      41 Antworten                          
    •     
    

Ich mag Text auf meine Webseite als Label hinzuzufügen und es nicht mehr ausgewählt werden.

Mit anderen Worten: Wenn der Mauszeiger über den Text Ich mag wäre es nicht in einen Text Wählcursor überhaupt drehen zu.

Ein gutes Beispiel dafür, was ich versuche die Tasten auf dieser Website zu erreichen (Fragen, Tags Benutzer, ...)

War es hilfreich?

Lösung

Sie können nicht dies tun, mit Plain-Vanilla-HTML, so JSF kann nicht viel tun, für Sie auch hier.

Wenn Sie Targeting anständiger Browser nur , dann nur der Einsatz von CSS3 machen : 

.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, dann sollten Sie diese JavaScript-Fallback: 

<!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 verwenden jQuery , dann ist hier ein weiteres Beispiel, das so eine neue Funktion disableSelection() zu jQuery fügt hinzu, dass man verwenden sie es überall in Ihrem jQuery-Code: 

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

Andere Tipps

Niemand hier gepostet eine Antwort mit all den richtigen CSS Variationen, so ist es hier: 

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

Die vollständige moderne Lösung für Ihr Problem ist rein CSS-basierte, aber beachten Sie, dass ältere Browser nicht unterstützt werden, in welchen Fällen würden Sie brauchen, um Lösungen wie die anderen Rückfall zur Verfügung gestellt haben.

So 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;

Allerdings wird der Mauszeiger auf einen caret noch ändern, wenn sie über den Text des Elements, so dass Sie hinzufügen, dass: 

cursor: default;

Modern CSS ist ziemlich elegant.

ich die jQuery verändern oben gepostet Plugin, damit es auf Live-Elemente funktionieren würde. 

(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();
});
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top