Hervorheben der Textauswahl deaktivieren

Das Hervorheben (engl.: Highlighting) der Textauswahl ist eine Funktion in Webbrowsern, mit der Benutzer Text auf einer Webseite markieren können.

Diese Funktion ist zwar grundsätzlich nützlich, kann aber für Webentwickler aus Design- oder Sicherheitsgründen ein Problem darstellen.

Im Folgenden zeigen wir Ihnen daher drei Möglichkeiten, wie Sie das Highlighting von Text deaktivieren können.

1. Methode: CSS

Eine Möglichkeit, die Hervorhebung der Textauswahl zu deaktivieren, ist die Verwendung von CSS. Sie können den folgenden Code in Ihre CSS-Datei hinzufügen, um die Textauswahl zu verhindern:

body {
   -webkit-user-select: none; /* Safari */
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */
   user-select: none; /* Standard */
}

Wenn Sie nur an bestimmten Stellen Ihrer Website das Highlighting deaktivieren möchten, können Sie anstelle von body eine Klasse verwenden, die Sie dem jeweiligen Element zuweisen, wie in diesem Beispiel zu sehen:

.keineauswahl {
   -webkit-user-select: none; /* Safari */
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */
   user-select: none; /* Standard */
}

<p>
   Textauswahl aktiviert.
</p>

<p class="keineauswahl">
   Textauswahl deaktiviert.
</p>

2. Methode: JavaScript

Eine weitere Möglichkeit, die Textauswahlhervorhebung zu deaktivieren, ist die Verwendung von JavaScript. Sie können den folgenden Code verwenden, um die Textauswahl auf einem Element zu verhindern:

document.getElementById("elementID").style.userSelect = "none";

3. Methode: jQuery

Wenn Sie jQuery verwenden, können Sie den folgenden Code verwenden, um die Hervorhebung der Textauswahl zu deaktivieren:

$(document).ready(function() {
   $("body").disableSelection();
});