Event Handler Tastaturergnisse
Tastaturereignisse kommen in erster Linie zum Einsatz, wenn ein Element per Tastatur ansteuerbar ist. Das klassische Beispiel sind hier Formularelemente.
Letztendlich kann man jedoch alle Elemente mit dem globalen Attribut contenteditable editierbar machen. Indem man den boolschen Wert true setzt. contenteditable = true;
Script:
var nachricht = document.getElementById("nachricht");
nachricht.addEventListener("keyup", letterCount);
function letterCount(evt){
var letters = this.value.length;
document.getElementById("anzeige").innerHTML = letters;
}
HTML Markup:
<form>
Geben Sie einen Text ein. Die Anzahl der Zeichen ist: <span id="anzeige">0</span><br>
<textarea name="nachricht" cols="60" rows="3" id="nachricht""></textarea>
</form>
Erklärung:
Ähnliche Eingabefelder gibt es bei Twitter, wo nur eine bestimmte Anzahl Zeichen erlaubt ist. Hiermit kann der User überprüfen, wieviele Zeichen er bereits eingegben hat.
Die Funktion letterCount wird auf das textarea Feld mit der id "nachricht" über den Eventlistener mit dem Event keyup aufgerufen. Über this.value.length erhält man die Anzahl der Zeichen. Das entspricht dem Eingabetext, aber auch dem Text innerhalb des Gültigkeitsbereiches des textarea Elementes. HTML5 Tipps. Da bei jeder Texteingabe die Taste wieder losgelassen wird, wird die Anzeige jedes mal aktualisiert. Der WErt wird dann dem Element mit der anzeige zugewiesen wird.
