6108 Stimmen

Hervorhebung der Textauswahl deaktivieren

Für Anker, die wie Schaltflächen wirken (zum Beispiel Preguntas , Tags , Benutzer Gibt es eine CSS-Standardmethode, um den Hervorhebungseffekt zu deaktivieren, wenn der Benutzer versehentlich den Text auswählt?

Mir ist klar, dass dies auch mit JavaScript möglich ist, und ein wenig Googeln ergab, dass die nur für Mozilla verfügbare -moz-user-select Option.

Gibt es eine standardkonforme Möglichkeit, dies mit CSS zu erreichen, und wenn nicht, was ist die "beste Vorgehensweise"?

11 Stimmen

Können Elemente innerhalb der Element-Hexe hat Hervorhebung deaktiviert, haben Hervorhebung mit in css in der Stil oder Klasse-Attribut aktiviert? oder mit anderen Worten, gibt es andere Werte für -webkit-user-select ect. andere als nur none?

11 Stimmen

Verwandt: stackoverflow.com/questions/16600479/ \= wie nur einige der untergeordneten Elemente ausgewählt werden können

15 Stimmen

In einigen Browsern gibt es einen Fehler, bei dem die Funktion "Alles auswählen" (CTRL+A und CMD+A) immer noch Dinge auswählt. Dies kann mit einer transparenten Auswahlfarbe bekämpft werden: ::selection { background: transparent; } ::-moz-selection { background: transparent; }

8578voto

Blowsie Punkte 39019

UPDATE Januar, 2017:

Selon Kann ich die die user-select wird derzeit von allen Browsern außer Internet Explorer 9 und seinen früheren Versionen unterstützt (aber leider immer noch benötigt ein Lieferantenpräfix).


Dies sind alle verfügbaren korrekten CSS-Varianten:

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>

Beachten Sie, dass user-select befindet sich im Standardisierungsprozess (derzeit in einer W3C-Arbeitsentwurf ). Es ist nicht garantiert, dass es überall funktioniert, und es kann Unterschiede in der Implementierung zwischen den Browsern geben. Außerdem können die Browser die Unterstützung für diese Funktion in Zukunft einstellen.


Weitere Informationen finden Sie unter Dokumentation zum Mozilla-Entwicklernetzwerk .

Die Werte für dieses Attribut sind none , text , toggle , element , elements , all y inherit .

44 Stimmen

Netten Code molokoloco :D , obwohl ich persönlich bleiben würde gut weg von der Verwendung, wie manchmal können Sie die Werte unterschiedlich für verschiedene Browser benötigen, und es verlässt sich auf JavaScript. Machen Sie eine Klasse und fügen Sie es zu Ihrem Element oder die Anwendung der css zu Ihrer Art von Element in Ihrem Stylesheet ist ziemlich kugelsicher.

69 Stimmen

'user-select'- Werte: none | text | toggle | element | elements | all | inherit - w3.org/TR/2000/WD-css3-userint-20000216

381 Stimmen

Das ist lächerlich! so viele verschiedene möglichkeiten, die gleiche sache zu tun. lasst uns einen neuen standard für benutzerauswahlen schaffen. wir nennen ihn standard-user-select . dann werden wir diese Probleme nicht haben. obwohl wir aus Gründen der Abwärtskompatibilität auch die anderen mit einbeziehen sollten. also wird der Code jetzt -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; standard-user-select: none; . ah, viel besser.

960voto

Tim Down Punkte 304837

In den meisten Browsern kann dies durch proprietäre Variationen des CSS erreicht werden user-select Eigentum, ursprünglich vorgeschlagen und dann in CSS 3 aufgegeben und jetzt vorgeschlagen in CSS UI Stufe 4 :

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

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

Für Internet Explorer < 10 und Oper < 15, müssen Sie die unselectable Attribut des Elements, das nicht abwählbar sein soll. Sie können dies über ein Attribut in HTML festlegen:

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

Leider wird diese Eigenschaft nicht vererbt, d.h. Sie müssen ein Attribut in den Start-Tag jedes Elements innerhalb der <div> . Wenn dies ein Problem darstellt, 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 : Dieser Traversal muss jedes Mal neu ausgeführt werden, wenn ein neues Element zum Baum hinzugefügt wird, aber einem Kommentar von @Han zufolge scheint es möglich zu sein, dies zu vermeiden, indem man eine mousedown Ereignishandler, der die unselectable auf das Ziel des Ereignisses. Siehe http://jsbin.com/yagekiji/1 für Einzelheiten.


Damit sind noch immer nicht alle Möglichkeiten abgedeckt. Während es unmöglich ist, Auswahlen in nicht auswählbaren Elementen zu initiieren, ist es in einigen Browsern (z. B. Internet Explorer und Firefox) immer noch unmöglich, Auswahlen zu verhindern, die vor dem nicht auswählbaren Element beginnen und nach diesem enden, ohne das gesamte Dokument nicht auswählbar zu machen.

34 Stimmen

Sie sollten den *-Selektor aus Ihrem Beispiel entfernen, seine wirklich ineffizient und es gibt wirklich keine Notwendigkeit, es in Ihrem Beispiel zu verwenden, gibt es?

71 Stimmen

@Blowsie: Das glaube ich nicht: Die CSS 2-Spezifikation besagt, dass *.foo y .foo sind genau gleichwertig (im zweiten Fall ist der Universalselektor ( * ) impliziert ist), so dass ich, abgesehen von Browser-Macken, nicht erkennen kann, dass die Einbeziehung der * wird die Leistung beeinträchtigen. Es ist eine langjährige Gewohnheit von mir, die * die ich ursprünglich aus Gründen der Lesbarkeit eingeführt habe: Sie zeigt auf einen Blick, dass der Autor beabsichtigt, alle Elemente abzugleichen.

40 Stimmen

Oooh nach einigem weiterem Lesen, scheint es * ist nur un-effiecient, wenn es als Schlüssel (die ganz rechts Selektor) dh .unselectable * . Weitere Informationen hier code.google.com/speed/page-speed/docs/

236voto

X-Istence Punkte 15834

Bis CSS 3's Benutzerauswahl Eigentum verfügbar wird, Gecko -basierten Browsern unterstützen die -moz-user-select Eigenschaft, die Sie bereits gefunden haben. WebKit und Blink-basierten Browsern unterstützen die -webkit-user-select Eigentum.

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

Es gibt keine "standardkonforme", schnelle und einfache Möglichkeit, dies zu tun; die Verwendung von JavaScript ist eine Option.

Die eigentliche Frage ist, warum Sie wollen, dass die Benutzer bestimmte Elemente nicht markieren und vermutlich kopieren und einfügen können. Ich habe noch kein einziges Mal erlebt, dass ich den Nutzern nicht gestatten wollte, einen bestimmten Teil meiner Website zu markieren. Mehrere meiner Freunde, die viele Stunden mit dem Lesen und Schreiben von Code verbracht haben, nutzen die Markierungsfunktion, um sich daran zu erinnern, wo sie sich auf der Seite befunden haben, oder um eine Markierung vorzunehmen, damit sie wissen, wo sie als Nächstes suchen müssen.

Der einzige Ort, an dem ich mir vorstellen kann, dass dies nützlich sein könnte, ist, wenn Sie Schaltflächen für Formulare haben, die nicht kopiert und eingefügt werden sollen, wenn ein Benutzer die Website kopiert und eingefügt hat.

0 Stimmen

Dies kann bei eingebetteten Geräten erforderlich sein, d. h. bei Geräten, bei denen ein Browser für die Darstellung der Benutzeroberfläche verwendet wird.

37 Stimmen

Ein weiterer Grund, warum dies erforderlich ist, ist das Klicken mit der Umschalttaste, um mehrere Zeilen in einem Gitter oder einer Tabelle auszuwählen. Sie möchten nicht den Text hervorheben, sondern die Zeilen auswählen.

41 Stimmen

Hochgradig interaktive Webanwendung mit viel Drag & Drop... versehentliches Hervorheben ist ein großes Problem für die Benutzerfreundlichkeit.

211voto

Pekka Punkte 429407

Eine JavaScript-Lösung für Internet Explorer ist:

onselectstart="return false;"

62 Stimmen

Vergessen Sie nicht ondragstart !

161voto

Benjamin Crouzier Punkte 37441

Wenn Sie die Textauswahl in allen Bereichen deaktivieren möchten, außer in <p> Elementen können Sie dies in CSS tun (achten Sie auf die -moz-none was die Überschreibung in Unterelementen erlaubt, was in anderen Browsern mit 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;
}

14 Stimmen

Vergewissern Sie sich, dass auch die Eingabefelder auswählbar sind: p, input { -webkit-user-select: text; -khtml-user-select: text; -moz-user-select: text; -o-user-select: text; user-select: text; }

13 Stimmen

Be very wary about turning off browser UI expectations on ALL code except for one item. Was ist mit Listenelementen <li /> Text, zum Beispiel?

0 Stimmen

Nur ein Update... laut MDN seit Firefox 21 -moz-none y none sind identisch.

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X