Du kannst die Textauswahl auf deiner Webseite mit der CSS-Eigenschaft user-select unterbinden. Diese Eigenschaft ermöglicht es dir, die Fähigkeit von Benutzer*innen zu kontrollieren, Textelemente auszuwählen und mit ihnen zu interagieren.

Text markieren mit CSS deaktivieren

So kannst du das markieren mit CSS deaktivieren und verhindern

CSS
.noselect {
  user-select: none;
}

Wende die Klasse auf die gewünschten Elemente an: Füge die Klasse noselect den HTML-Elementen hinzu, bei denen du die Textauswahl verhindern möchtest. Beispielsweise:

HTML

<p class="noselect">Dieser Text kann nicht markiert werden.</p

Benutzerfreundlichkeit: Das Deaktivieren der Textauswahl kann sich aber auf die Nutzerfreundlichkeit deiner WordPress Webseite auswirken

Text markieren mit Javascript verhindern

Hier ist ein Beispiel, wie du die Textauswahl in einem Paragraphen mit der ID myParagraph unterbindest:

Identifiziere zuerst Zielelemente: Bestimme die HTML-Elemente, in denen du die Textauswahl deaktivieren möchtest. Du kannst sie anhand ihrer IDs, Klassen oder CSS-Selektoren ansprechen.

Java
const paragraph = document.getElementById('myParagraph');

paragraph.addEventListener('mousedown', (event) => {
  event.preventDefault();
});

paragraph.addEventListener('mouseup', (event) => {
  event.preventDefault();
});

paragraph.addEventListener('mousemove', (event) => {
  event.preventDefault();
});

paragraph.addEventListener('selectstart', (event) => {
  event.preventDefault();
});

paragraph.addEventListener('copy', (event) => {
  event.preventDefault();
});

Füge Event-Listener hinzu: Füge Event-Listener zu den Zielelementen hinzu, um Maus- und Tastaturereignisse im Zusammenhang mit der Textauswahl zu erfassen. Häufige Ereignisse sind:

Verhindere das Standardverhalten: Verwende in den Event-Handlern die Methode preventDefault(), um das Standardverhalten des Ereignisses zu verhindern. Dies hindert den Browser daran, den Text hervorzuheben.

Zusätzliche Punkte:

Denke daran: Das Deaktivieren der Textauswahl kann die Benutzerfreundlichkeit und Barrierefreiheit beeinträchtigen. Verwende es selektiv und biete alternative Möglichkeiten für Benutzer, mit dem Text zu interagieren, wenn dies erforderlich ist.