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"?
In den Lösungen in den vorherigen Antworten wird die Auswahl gestoppt, aber der Benutzer denkt immer noch, dass Sie Text auswählen können, weil sich der Cursor immer noch ändert. Um ihn statisch zu halten, müssen Sie Ihren CSS-Cursor einstellen:
.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 völlig flach, so wie er in einer Desktop-Anwendung sein würde.
@kojow7 Im Gegensatz zu "überlagert". Anstelle von Text, der über den anderen Elementen schwebt. Es ist ähnlich wie der Unterschied zwischen SVG- und PNG-Bildern.
Ich war überrascht, dass Firefox im Jahr 2019 immer noch das Präfix "Anbieter" benötigt. Ich habe unbedacht nur user-select: none; Ich dachte, die Norm wäre inzwischen angenommen worden, aber leider ist das nicht der Fall. Da fragt man sich, worüber die Leute im Normenausschuss noch debattieren könnten. "Nein, Leute... I vraiment denken, dass es sein sollte user-select: cant; weil es anschaulicher ist, weißt du?" "Das haben wir doch schon besprochen, Mike. Wir müssten das Apostroph weglassen, und das ist unhöflich!" "Genug, Leute! Wir werden uns nächsten Monat erneut mit diesem Thema befassen. Die Sitzung des Normenausschusses ist vertagt!"
Ich würde dies nicht empfehlen, da es das Problem nicht wirklich behebt, sondern lediglich die Textauswahl ausblendet. Dies kann zu einer schlechten Benutzerfreundlichkeit führen, denn wenn ich meinen Cursor über die Seite ziehe, könnte ich jeden beliebigen Text auswählen, ohne es zu wissen. Dies kann zu allen möglichen seltsamen "Fehlern" in der Benutzerfreundlichkeit führen.
Ich mag die hybride Lösung aus CSS und jQuery.
Um alle Elemente innerhalb von <div class="draggable"></div> nicht auswählbar ist, verwenden Sie dieses CSS:
.draggable {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-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 dann, wenn Sie jQuery verwenden, fügen Sie dies innerhalb einer $(document).ready() Block:
if (($.browser.msie && $.browser.version < 10) || $.browser.opera) $('.draggable').find(':not(input)').attr('unselectable', 'on');Ich denke, Sie wollen immer noch, dass alle Eingabeelemente interaktiv sein können, daher die :not() Pseudo-Selektor. Sie könnten verwenden '*' wenn es Sie nicht interessiert.
Achtung: Internet Explorer 9 benötigt dieses zusätzliche jQuery-Teil möglicherweise nicht, daher sollten Sie dort eine Versionskontrolle hinzufügen.
Verwenden Sie -ms-user-select: none; (für IE10) und Ihr jQuery-"if" sollte so aussehen: if (($.browser.msie && $.browser.version < 10) || $.browser.opera)
Seien Sie vorsichtig, Mann!!! Um es in Firefox auswählbar zu machen, müssen Sie verwenden -moz-user-select: Normal;
@mhenry1384 jQuery.browser ist seit der Version 1.3 veraltet und wurde in der Version 1.9 entfernt. api.jquery.com/jQuery.browser
Sie können verwenden CSS o JavaScript dafür.
El JavaScript Weg wird unterstützt in ältere Browsern, wie alt Versionen des Internet Explorers, aber wenn das nicht der Fall ist, dann verwenden Sie die CSS-Methode:
HTML/JavaScript:
<html onselectstart='return false;'>
<body>
<h1>This is the Heading!</h1>
<p>And I'm the text, I won't be selected if you select me.</p>
</body>
</html>HTML/CSS:
.not-selectable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
<body class="not-selectable">
<h1>This is the Heading!</h1>
<p>And I'm the text, I won't be selected if you select me.</p>
</body> 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.
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; }21 Stimmen
Ich kann nur sagen: Bitte tun Sie das nicht. Aus meiner Erfahrung heraus, habe ich mehr als einmal tatsächlich wollen um einen Text auszuwählen, der auch als Schaltfläche dient, um ihn an anderer Stelle einzufügen. Es wäre unvorstellbar ärgerlich, das nicht tun zu können, weil irgendein Webentwickler sich die Mühe gemacht hat, diese Funktion absichtlich für mich zu deaktivieren. Bitte tun Sie das also nicht, es sei denn, Sie haben eine sehr, sehr aus gutem Grund.
4 Stimmen
Im Jahr 2017 ist es besser, die
postcssyautoprefixerund Browser-Version einstellen, dannpostcssalles cool machen.2 Stimmen
Die Benutzeroberfläche wurde geändert. Im Jahr 2019 befinden sich alle drei genannten Punkte nun in einem Hamburger-Menü oben links. "Tags" y "Benutzer" sind dort zu finden, und "Fragen" heißt jetzt "Stack Overflow" (mit einem Symbol davor).