Frage Wie kann man die Hervorhebung der Textauswahl deaktivieren?


Für Anker, die sich wie Schaltflächen verhalten (z. B. Fragen, Stichworte, Benutzerusw. oben auf der Seite Stapelüberlauf) oder Tabs, gibt es eine CSS-Standardmethode, um den Hervorhebungseffekt zu deaktivieren, wenn der Benutzer versehentlich den Text auswählt?

Ich merke, dass dies mit JavaScript gemacht werden könnte, und ein wenig googeln brachte den Mozilla-only -moz-user-select Möglichkeit.

Gibt es eine standardkonforme Möglichkeit, dies mit CSS zu erreichen, und wenn nicht, was ist der "Best Practice" -Ansatz?


4351
2018-05-05 20:29


Ursprung


Antworten:


UPDATE Januar 2017:

Gemäß Kann ich benutzen, das user-select wird derzeit in allen Browsern mit Ausnahme von Internet Explorer 9 und früheren Versionen (leider) unterstützt immer noch benötigt ein Anbieterpräfix).


Alle richtigen CSS-Varianten sind:

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>


Beachten Sie, dass es ein Nicht-Standard-Funktion (d. h. kein Teil einer Spezifikation). Es ist nicht garantiert, dass es überall funktioniert, und es kann Unterschiede in der Implementierung zwischen den Browsern geben und in Zukunft können Browser die Unterstützung dafür ablehnen.


Weitere Informationen finden Sie in Mozilla Developer Network Dokumentation.


6361
2017-12-05 11:45



In den meisten Browsern kann dies mit proprietären Varianten des CSS erreicht werden user-select Eigentum, ursprünglich vorgeschlagen und dann in CSS3 aufgegeben und jetzt vorgeschlagen in CSS UI Level 4:

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

   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

Für IE <10 und Opera <15 müssen Sie den unselectable Attribut des Elements, das nicht auswählbar sein soll. Sie können dies mithilfe eines Attributs in HTML festlegen:

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

Leider wird diese Eigenschaft nicht vererbt, was bedeutet, dass Sie ein Attribut in das Start - Tag jedes Elements in der <div>. Wenn dies ein Problem ist, können Sie stattdessen JavaScript verwenden, um dies rekursiv für die Nachkommen eines Elements zu tun:

function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.setAttribute("unselectable", "on");
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

makeUnselectable(document.getElementById("foo"));

Update 30. April 2014: Diese Baumüberquerung muss immer dann erneut ausgeführt werden, wenn ein neues Element zum Baum hinzugefügt wird, aber es scheint aus einem Kommentar von @Han, dass es möglich ist, dies zu vermeiden Hinzufügen eines mousedown Event-Handler, der setzt unselectable auf das Ziel der Veranstaltung. Sehen http://jsbin.com/yagekiji/1 für Details.


Dies deckt immer noch nicht alle Möglichkeiten ab. Obwohl es nicht möglich ist, Auswahlen in nicht auswählbaren Elementen zu initiieren, ist es in einigen Browsern (zB IE und Firefox) immer noch nicht möglich Auswahlen zu verhindern, die vor dem nicht auswählbaren Element beginnen und enden, ohne das gesamte Dokument auswählbar zu machen.


727
2017-11-13 16:05



Eine JavaScript-Lösung für IE ist

onselectstart="return false;"

165
2018-05-05 20:37



Bis CSS 3 Benutzer auswählen Eigenschaft wird verfügbar, Gecko-basierte Browser unterstützen die -moz-user-select Eigenschaft, die Sie bereits gefunden haben. Webkit und Blink-basierte Browser unterstützen die -webkit-user-select Eigentum.

Dies wird natürlich nicht in Browsern unterstützt, die die Gecko-Rendering-Engine nicht verwenden.

Es gibt keine "Standards" -konforme schnelle und einfache Möglichkeit, dies zu tun; JavaScript ist eine Option.

Die eigentliche Frage ist, warum Benutzer bestimmte Elemente nicht markieren und vermutlich kopieren und einfügen dürfen. Ich bin nicht ein einziges Mal darauf gestoßen, dass ich den Nutzern nicht erlauben wollte, einen bestimmten Teil meiner Website hervorzuheben. Einige meiner Freunde nutzen die Hervorhebungsfunktion, nachdem sie viele Stunden damit verbracht haben, Code zu lesen und zu schreiben, um sich daran zu erinnern, wo auf der Seite sie waren, oder um einen Marker zu setzen, damit ihre Augen wissen, wo sie als Nächstes hinschauen sollen.

Der einzige Ort, den ich sehen könnte, ist, wenn Sie Schaltflächen für Formulare haben, die nicht kopiert und eingefügt werden sollten, wenn ein Benutzer die Website kopiert und eingefügt hat.


159
2018-05-24 21:24



Wenn Sie die Textauswahl für alles außer für "on" deaktivieren möchten <p> Elemente können Sie dies in CSS tun (achten Sie auf die -moz-none Das erlaubt das Überschreiben in Unterelementen, was in anderen Browsern mit erlaubt ist none):

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

p {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
}

120
2017-08-30 18:32



In den obigen Lösungen wird die Auswahl gestoppt, aber der Benutzer denkt immer noch, dass Sie Text auswählen können, da sich der Cursor immer noch ändert. Um es statisch zu halten, müssen Sie Ihren CSS-Cursor setzen:

.noselect {
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>

Dadurch wird Ihr Text wie in einer Desktop-Anwendung flach.


111
2018-05-05 20:46



Sie können dies in Firefox und Safari tun (Chrome auch?)

::selection { background: transparent; }
::-moz-selection { background: transparent; }

101
2017-09-21 07:09



Problemumgehung für Webkit:

/* Disable tap highlighting */
-webkit-tap-highlight-color: rgba(0,0,0,0);

Ich habe es in einem CardFlip-Beispiel gefunden.


73
2017-11-11 19:53



Ich mag die hybride CSS + jQuery-Lösung.

Um alle Elemente ins Innere zu bringen <div class="draggable"></div> nicht auswählbar, benutze dieses CSS:

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

.draggable input { 
    -webkit-user-select: text; 
    -khtml-user-select: text; 
    -moz-user-select: text; 
    -o-user-select: text; 
    user-select: text; 
 }

Und wenn Sie jQuery verwenden, fügen Sie dieses in a ein $(document).ready() Block:

if (($.browser.msie && $.browser.version < 10) || $.browser.opera) $('.draggable').find(':not(input)').attr('unselectable', 'on');

Ich gehe davon aus, dass Sie immer noch möchten, dass alle Eingabeelemente miteinander interagieren können :not() Pseudo-Selektor. Du könntest benutzen '*' anstatt, wenn es dir egal ist.

Vorbehalt: IE9 benötigt dieses zusätzliche jQuery-Objekt möglicherweise nicht, daher sollten Sie möglicherweise einen Versions-Check dort hinzufügen.


66
2018-05-01 11:36



.hidden:after {
    content: attr(data-txt);
}
<p class="hidden" data-txt="Some text you don't want to be selected"></p>

Es ist jedoch nicht der beste Weg.


62
2017-12-23 14:05