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
undtouchend
ä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.