Εστίαση πεδίων κειμένου στο JavaScript

Ας υποθέσουμε ότι έχουμε ένα πεδίο εισαγωγής. Μπορείτε να κάνετε κλικ σε αυτό το πεδίο εισαγωγής και μετά θα αρχίσει να αναβοσβήνει ο δρομέας και θα μπορείτε να εισάγετε κείμενο σε αυτό.

Για μια τέτοια κατάσταση λέμε ότι το πεδίο εισαγωγής αυτή τη στιγμή έχει εστίαση εισαγωγής. Στην πράξη αυτό σημαίνει ότι αν αρχίσετε να εισάγετε κείμενο από το πληκτρολόγιο, τότε αυτό το κείμενο θα πηγαίνει σε εκείνο το πεδίο εισαγωγής που έχει τώρα την εστίαση εισαγωγής. Εάν στη συνέχεια κάνετε κλικ κάπου έξω από το πεδίο εισαγωγής, τότε αυτό το πεδίο εισαγωγής θα χάσει την εστίαση εισαγωγής και δεν θα μπορείτε να εισάγετε κείμενο σε αυτό.

Για να πιάσουμε τη στιγμή απόκτησης ή απώλειας εστίασης από ένα πεδίο εισαγωγής, στο JavaScript προβλέπονται ειδικές εκδηλώσεις: Η εκδήλωση focus επιτρέπει την ανίχνευση απόκτησης εστίασης από ένα πεδίο εισαγωγής, ενώ η εκδήλωση blur - την απώλεια. Ας δοκιμάσουμε στην πράξη. Ας υποθέσουμε ότι έχουμε ένα πεδίο εισαγωγής:

<input id="elem" value="text">

Ας πάρουμε μια αναφορά σε αυτό σε μια μεταβλητή:

let elem = document.querySelector('#elem');

Και τώρα ας κάνουμε έτσι ώστε κατά την απόκτηση εστίασης να εκτυπώνεται στην κονσόλα το τρέχον κείμενο του πεδίου εισαγωγής:

elem.addEventListener('focus', function() {
	console.log(elem.value);
});

Δίνεται ένα πεδίο εισαγωγής. Κατά την απόκτηση εστίασης γράψτε σε αυτό τον αριθμό 1, και κατά την απώλεια εστίασης - τον αριθμό 2.

Δίνεται ένα πεδίο εισαγωγής. Ας εισάγεται σε αυτό ένας αριθμός. Κατά την απώλεια εστίασης εμφανίστε στην οθόνη το τετράγωνο αυτού του αριθμού.

Δίνεται ένα πεδίο εισαγωγής, στο οποίο αρχικά υπάρχει κάποιο κείμενο. Κατά την απόκτηση εστίασης από το πεδίο εισαγωγής καθαρίστε το περιεχόμενο αυτού του πεδίου εισαγωγής.