DE
HTML - wie deaktiviert man die Textauswahl?
0
points
Mit HTML, JavaScript und CSS ist es möglich, die Textauswahl wie folgt zu entfernen.
1. Benutzerdefiniertes Beispiel für eine kompatible Rückseite
Bei diesem Ansatz wird die Option zur Textauswahl (und nicht nur diese) aus dem Element entfernt, indem die hinzugefügt wird:
- spezifische Klasse (
.disable-selectionim Beispielcode defineirt) unselectable="on"-Attribut - erforderlich für IE < 10 und Opera < 15onselectstart="return false;"- alternative Lösung für Internet Explorer
Hinweise:
- einige Browser unterstützen immer noch nicht die
user-select-Eigenschaft (hilfreiches Link), so dass es notwendig ist, Präfixe für die volle Leistungsfähigkeit zu verwenden.user-select-Eigenschaft ist nicht Teil des Standards - sie hat den Status eines Arbeitsentwurfs für CSS4.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
.disable-selection {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox in der Vergangenheit (alte Versionen) */
-ms-user-select: none; /* Internet Explorer (>=10) / Edge */
user-select: none; /* Aktuell unterstützt: */
/* Chrome, Opera und Firefox */
}
div {
margin: 10px;
padding: 20px;
}
</style>
</head>
<body>
<div class="disable-selection"
style="background: silver;"
unselectable="on"
onselectstart="return false;">
Dieser Text ist nicht auswählbar ...
</div>
<div style="background: gold;">
Dieser Text ist auswählbar ...
</div>
</body>
</html>