Gedrückte Tasten in JavaScript abfangen
Mit dem Event-Objekt kann man
gedrückte Tasten abfangen. Lasst uns
ansehen, wie das gemacht wird.
Nehmen wir an, wir haben ein Input-Feld:
html<input>
Wir holen uns eine Referenz darauf in eine Variable:
javascriptlet elem = document.querySelector('input');
Wir hängen ein Event an unser Input-Feld, das bei jedem Tastendruck ausgelöst wird:
javascriptelem.addEventListener('keypress', function(event) {
});
In der Eigenschaft key des
Event-Objekts befindet sich
das gedrückte Zeichen:
javascriptelem.addEventListener('keypress', function(event) {
console.log(event.key);
});
Und in der Eigenschaft code
befindet sich der Code der gedrückten Taste:
javascriptelem.addEventListener('keypress', function(event) {
console.log(event.code);
});
Erstellen Sie ein Input-Feld, das bei der Eingabe die Werte der eingegebenen Tasten und ihre Codes ausgibt.
Drücken Sie verschiedene Tasten in dem Input-Feld und schauen Sie, welche Werte und Codes sie haben.
Stellen Sie fest, welchen Code
die Taste Enter hat.
Stellen Sie fest, welchen Code
die Taste BackSpace hat.
Gegeben sind ein Absatz und ein Input-Feld. Es wird Text eingegeben
und die Taste Enter gedrückt. Sorgen Sie dafür,
dass der eingegebene Text in diesem Moment
in den Absatz unter dem Input-Feld übernommen wird
und der Inhalt des Input-Felds gelöscht wird.