Fokus von Textfeldern in JavaScript
Nehmen wir an, wir haben ein Inputfeld. Sie können auf dieses Inputfeld klicken, und danach blinkt darin der Cursor-Strich und man kann Text eingeben.
Über diesen Zustand sagt man, dass das Inputfeld jetzt Eingabefokus hat. In der Praxis bedeutet dies, dass wenn man beginnt, Text über die Tastatur einzugeben, dieser Text in das Inputfeld gelangt, das gerade den Eingabefokus hat. Wenn man dann irgendwo außerhalb des Inputfelds klickt, verliert dieses Inputfeld den Fokus und man kann keinen Text mehr hineingeben.
Um den Moment des Erhalts oder Verlusts des Fokus
durch ein Inputfeld abzufangen, gibt es in JavaScript
spezielle Ereignisse: Das Ereignis focus
erlaubt es, das Erhalten des Fokus abzufangen,
und das Ereignis blur - den Verlust. Probieren wir es
in der Praxis aus. Nehmen wir an, wir haben ein Inputfeld:
<input id="elem" value="text">
Holen wir uns eine Referenz darauf in eine Variable:
let elem = document.querySelector('#elem');
Und jetzt sorgen wir dafür, dass beim Erhalt des Fokus der aktuelle Text des Inputfelds in der Konsole ausgegeben wird:
elem.addEventListener('focus', function() {
console.log(elem.value);
});
Gegeben ist ein Inputfeld. Beim Erhalt des Fokus schreiben Sie die
Zahl 1 hinein, und beim Verlust des Fokus -
die Zahl 2.
Gegeben ist ein Inputfeld. Es soll eine Zahl eingegeben werden. Beim Verlust des Fokus geben Sie das Quadrat dieser Zahl auf dem Bildschirm aus.
Gegeben ist ein Inputfeld, in dem anfangs irgendein Text steht. Beim Erhalt des Fokus durch das Inputfeld löschen Sie den Inhalt dieses Inputfelds.
