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

.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:

<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

• Verwende diese Technik daher nur gezielt und biete alternative Möglichkeiten für Benutzer*innen, mit dem Text zu interagieren.
• Kompatibilität: Die Eigenschaft user-select wird von allen modernen Browsern unterstützt.
• Es gibt jedoch ältere Browser, die diese Eigenschaft möglicherweise nicht unterstützen.
• Alternative Methoden: Es gibt auch andere Möglichkeiten, die Textauswahl zu verhindern, z. B. mit JavaScript. Diese Methoden können jedoch komplexer sein und erfordern mehr Programmierkenntnisse.

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.

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:

• mousedown: Wird ausgelöst, wenn die Maustaste auf dem Element gedrückt wird.
• mouseup: Wird ausgelöst, wenn die Maustaste losgelassen wird.
• mousemove: Wird ausgelöst, wenn der Mauszeiger über das Element bewegt wird.
• selectstart: Wird ausgelöst, wenn der Benutzer beginnt, Text auszuwählen.
• copy: Wird ausgelöst, wenn der Benutzer ausgewählten Text kopiert.

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:

• Ereignis-Bubbling: Bei verschachtelten Elementen können Ereignisse zu übergeordneten Elementen aufsteigen („bubbling“). Du kannst Event-Propagierungsmethoden wie stopPropagation() verwenden, um dies zu verhindern.
• Touch-Events: Für Touchscreens musst du Touch-Events wie touchstart, touchmove und touchend ähnlich wie Maus-Events behandeln.
• Tastaturbefehle: Diese Methode verhindert zwar die Textauswahl mit der Maus, aber Tastaturbefehle für die Textauswahl können weiterhin funktionieren. Erwäge bei Bedarf zusätzliche Techniken, um Tastaturbefehle zu deaktivieren.

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.

Über Mich

Domi

Hi ich bin’s Dominik. Auf Blogseite.com findest du alles was mich interessiert. Mag Games, liebe SEO, programmiere gerne und möchte dir mit verschiedenen Themen die mich begeistern einen Mehrwert liefern. Viel Spaß auf meiner Seite

Kennst du schon diese Memes?

Smiley Bedeutung