Videos eBook Forum Kontakt

jetzt Videos kaufen
zum Lernen von HTML,
CSS und Webdesign

Jetzt das HTML-Seminar bestellen als
Video-Tutorial mit über 210 Videos:
von den Grundlagen bis zur fertigen Website
Video-Kurs HTML5, CSS & Webdesign

Video-Kurs bestellen HTML5, CSS & Webdesign
Video-Kurs bestellen HTML5, CSS & Webdesign

getSelection – Textauswahl durch Nutzer

Über getSelection bekommen wir in JavaScript die Möglichkeit auf die durch den Nutzer erfolgte Textauswahl zuzugreifen und mit dem selektierten Text weiterzuarbeiten. Im folgenden Tutorial die Erklärung und eine Beispielanwendung in Form eines Rechtschreibfehler-Melders.

Die JavaScript-Methode findet sich sowohl bei dem Browserobjekt „window“ wie auch „document“. Beide arbeiten identisch! Allerdings unterstützen nicht alle Browserversionen diese Möglichkeit, was wir in unserem Praxisbeispiel entsprechend abfangen. Aber erst einmal die grundlegende Funktion.

Zum Test können wir die Konsole aufrufen und unseren Befehl eintippen (davor bitte auf der HTML-Seite eine Textpasssage auswählen!):

window.getSelection();

Wir erhalten als Rückgabewert eine „Selection“ – praktischer wäre gleich die auf der HTML-Seite ausgewählte Textpassage in Form eines Strings. Also erweitern wir unseren Befehl mit toString.

window.getSelection().toString();

Jetzt sollten wir in der Konsole nur unseren ausgewählten Textbereich sehen, sofern wir nicht mit einer alten Version des Internet-Explorers (<= Version 9) arbeiten.

Beim alten Versionen des IE benötigen wir document.selection.createRange()

Hier können wir uns mit einer IF-Abfrage behelfen und überprüfen, ob mit einer der Textauswahl-Methoden ein Text vorliegt:

let nutzertextauswahl = "";
if (window.getSelection) { 
    nutzertextauswahl = window.getSelection().toString();
} else if (document.getSelection) { 
    nutzertextauswahl = document.getSelection().toString();
} else if (document.selection) { 
    // Internet Explorer vor der Version 9
    nutzertextauswahl = document.selection.createRange().toString();
}

Um nun unser Programm testen zu können, packen wir es in eine Funktion mit dem Namen „TextauswahlAuslesen()“ und rufen diese über einen Klick auf eine Schaltfläche auf:

<p>Hier ein Text, der vom Nutzer ausgewählt werden kann (bitte auch mit Auswahl von einzelnen Passagen testen).</p>
<button onclick="TextauswahlAuslesen()">Textauswahl anzeigen</button>
<script>
function TextauswahlAuslesen() {
    let nutzertextauswahl = "";
    if (window.getSelection) { 
        nutzertextauswahl = window.getSelection().toString();
        alert("window: " + nutzertextauswahl);
    } else if (document.getSelection) { 
        nutzertextauswahl = document.getSelection().toString();
        alert("document: " + nutzertextauswahl);
    } else if (document.selection) { 
        // Internet Explorer vor der Version 9
        nutzertextauswahl = document.selection.createRange().toString();
        alert("IE alt: " + nutzertextauswahl);
    }
}
</script>

Rechtschreibfehler-Melder durch Nutzer

Unser Praxisbeispiel im Ansatz, wo JavaScript genutzt ist. Rechtschreibfehler schleichen sich in Texten ein – und hier können wir die Nutzer einer Website natürlich bitten, gefundene Schreibfehler zu melden. Das wird aber nur geschehen, wenn dies wenig Aufwand für den Nutzer bedeutet. Also bieten wir dem Nutzer ein Formular an, in das vom Nutzer markierter Text (der den Rechtschreibfehler enthält) einfach übernommen werden kann und gemeldet wird.

Wir benötigen also ein Formular in HTML:

<p>Wenn Sie einen Fehler finden, bitte mitteilen 
(egal ob Schreibfehler oder inhaltlicher Fehler).
Danke</p>
<p>Mit Maus fehlerhafte Stelle markieren und mit mit folgendem Button übernehmen: 
<input type="button" id="fehleruebertragbutton" value="markierten Text übertragen" onclick="TextauswahlAuslesen();">
form action="fehlermelder.php" method="post" id="fehlermelder">
<p>Fehler:<br>
textarea id="fehlerarea" name="fehlerarea" style="width:100%" rows="5">/textarea>
</p>
<p>Verbesserung:<br>
textarea id="verbesserungsvorschlag" name="verbesserungsvorschlag" style="width:100%" rows="5">/textarea>
</p>
<input id="seitenurl" name="seitenurl" type="hidden" size="30" value="">
<input id="aktion" name="aktion" type="hidden" size="30" value="senden">
<p>
<input type="submit" id="fehleruebertragbutton" value="absenden">
</p>
/form>

Jetzt benötigen wir nur noch unser JavaScript, dass in unserem Formularfeld „fehlerarea“ den im Text markierten Textbereich einträgt und im versteckten Feld URL die URL der Seite ergänzt.

Hierzu können wir unsere oben erstellte Funktion erweitern:

<html>
<head>
<title>Textauswahl durch Nutzer</title>
</head>
<body>
<p>Wenn Sie einen Fehler finden, bitte mitteilen 
(egal ob Schreibfehler oder inhaltlicher Fehler).
Danke</p>
<p>Mit Maus fehlerhafte Stelle markieren und mit mit folgendem Button übernehmen: 
<input type="button" id="fehleruebertragbutton" value="markierten Text übertragen" onclick="TextauswahlAuslesen();">
form action="fehlermelder.php" method="post" id="fehlermelder">
<p>Fehler:<br>
textarea id="fehlerarea" name="fehlerarea" style="width:100%" rows="5">/textarea>
</p>
<p>Verbesserung:<br>
textarea id="verbesserungsvorschlag" name="verbesserungsvorschlag" style="width:100%" rows="5">/textarea>
</p>
<input id="seitenurl" name="seitenurl" type="hidden" size="30" value="">
<input id="aktion" name="aktion" type="hidden" size="30" value="senden">
<p>
<input type="submit" id="fehleruebertragbutton" value="absenden">
</p>
/form>
<script>
document.getElementById('seitenurl').value = window.location.pathname;
function TextauswahlAuslesen() {
    let nutzertextauswahl = "";
    if (window.getSelection) { 
        nutzertextauswahl = window.getSelection().toString();
        // alert("window: " + nutzertextauswahl);
    } else if (document.getSelection) { 
        nutzertextauswahl = document.getSelection().toString();
        // alert("document: " + nutzertextauswahl);
    } else if (document.selection) { 
        // Internet Explorer vor der Version 9
        nutzertextauswahl = document.selection.createRange().toString();
        // alert("IE alt: " + nutzertextauswahl);
    }
    if ( nutzertextauswahl != "") {
    	document.getElementById('fehlerarea').value=nutzertextauswahl;
    }
}
</script>
</body>
</html>

Für das Absenden des Formulars benötigen wir noch ein PHP-Programm – hier bitte in meinem PHP-Kurs unter https://www.php-kurs.com/email-per-php.htm nachschlagen.

Somit hätten wir ein Rechtschreibfehler-Melde-Skript erstellt, das durch JavaScript dem Nutzer Komfort bietet.