Gibt es eine Möglichkeit, einen DIV nicht auswählbar zu machen?

Hier sind interessante CSS-Fragen für Sie!

Ich habe einen Textbereich mit einem transparenten Hintergrund, der einen TEXT überlagert, den ich als eine Art Wasserzeichen verwenden möchte. Der Text ist groß und nimmt einen Großteil des Textbereichs ein. Es sieht gut aus, das Problem ist, wenn der Benutzer in den Textbereich klickt, wählt er manchmal stattdessen den Wasserzeichentext aus. Ich möchte, dass der Wasserzeichentext niemals auswählbar ist. Ich hatte erwartet, dass etwas, das im Z-Index niedriger ist, nicht auswählbar ist, aber Browser scheinen sich bei der Auswahl von Elementen nicht um Z-Index-Ebenen zu kümmern. Gibt es einen Trick oder eine Möglichkeit, es so zu machen, dass dieser DIV niemals auswählbar ist?

Ich habe vor einiger Zeit eine einfache jQuery-Erweiterung geschrieben, um die Auswahl zu deaktivieren: Deaktivieren der Auswahl in jQuery . Sie können es durch aufrufen$('.button').disableSelection();

Alternativ mit CSS (Cross-Browser):

.button {
        user-select: none;
        -moz-user-select: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -o-user-select: none;
} 

Der folgende CSS-Code funktioniert fast moderner Browser:

.unselectable {
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
}

Für IE müssen Sie JS verwenden oder ein Attribut in ein HTML-Tag einfügen.

<div id="foo" unselectable="on" class="unselectable">...</div>

Aktualisieren Sie einfach die ursprüngliche, vielbeachtete Antwort von aleemb mit ein paar Ergänzungen zum CSS.

Wir haben die folgende Kombination verwendet:

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

Wir haben den Vorschlag zum Hinzufügen des Webkit-Touch-Eintrags erhalten von:
http://phonegap-tips.com/articles/essential-phonegap-css-webkit-touch-callout.html

2015 Apr: Ich aktualisiere nur meine eigene Antwort mit einer Variation, die nützlich sein kann. Wenn Sie den DIV im laufenden Betrieb auswählbar / nicht auswählbar machen müssen und bereit sind, Modernizr zu verwenden , funktioniert Folgendes in Javascript einwandfrei:

    var userSelectProp = Modernizr.prefixed('userSelect');
    var specialDiv = document.querySelector('#specialDiv');
    specialDiv.style[userSelectProp] = 'none';

Wie Johannes bereits vorgeschlagen hat, ist ein Hintergrundbild wahrscheinlich der beste Weg, dies allein in CSS zu erreichen.

Eine JavaScript-Lösung müsste auch "Dragstart" beeinflussen, um in allen gängigen Browsern wirksam zu sein.

JavaScript:

<div onselectstart="return false;" ondragstart="return false;">your text</div>

jQuery:

var _preventDefault = function(evt) { evt.preventDefault(); };
$("div").bind("dragstart", _preventDefault).bind("selectstart", _preventDefault);

Reich

Sie können pointer-events: none;in Ihrem CSS verwenden

div {
  pointer-events: none;
}

Sie können dies versuchen:

<div onselectstart="return false">your text</div>

Würde ein einfaches Hintergrundbild für den Textbereich nicht ausreichen?

WebKit-Browser (dh Google Chrome und Safari) verfügen über eine CSS-Lösung, die Mozillas -moz-user-select ähnelt: none

.no-select{    
    -webkit-user-select: none;
    cursor:not-allowed; /*makes it even more obvious*/
}

Fügen Sie auch unter IOS CSS hinzu, wenn Sie graue, halbtransparente Overlays entfernen möchten, die auf der Berührung erscheinen:

-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;

Verwenden

onselectstart = "return false"

Es verhindert das Kopieren Ihrer Inhalte.

Stellen Sie sicher, dass Sie die Position explizit als absolut oder relativ festlegen, damit der Z-Index für die Auswahl funktioniert. Ich hatte ein ähnliches Problem und dies löste es für mich.

Sie sind sich Ihres Anwendungsfalls nicht sicher, können ihn jedoch ziehbar machen.