Fokus Bidang Teks dalam JavaScript

Misalkan kita memiliki sebuah input. Anda dapat mengklik input ini dan setelah itu kursor garis akan berkedip di dalamnya dan Anda dapat memasukkan teks ke dalamnya.

Kondisi seperti ini dikatakan bahwa input saat ini memiliki fokus input. Dalam praktiknya, ini berarti bahwa jika Anda mulai mengetik teks dari keyboard, maka teks tersebut akan masuk ke input yang saat ini memiliki fokus input. Jika kemudian Anda mengklik di luar input, maka input tersebut akan kehilangan fokus input dan teks tidak dapat lagi dimasukkan ke dalamnya.

Untuk menangkap momen ketika sebuah input mendapatkan atau kehilangan fokus, di JavaScript disediakan event khusus: Event focus memungkinkan untuk menangkap perolehan fokus oleh input, dan event blur - kehilangannya. Mari kita coba dalam praktik. Misalkan kita memiliki input:

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

Dapatkan referensinya ke dalam variabel:

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

Dan sekarang mari kita buat sehingga saat mendapatkan fokus, teks saat ini dari input dicetak ke konsol:

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

Diberikan sebuah input. Saat mendapatkan fokus, tuliskan angka 1 ke dalamnya, dan saat kehilangan fokus - angka 2.

Diberikan sebuah input. Misalkan sebuah angka dimasukkan ke dalamnya. Saat kehilangan fokus, tampilkan kuadrat dari angka tersebut di layar.

Diberikan sebuah input, yang awalnya berisi beberapa teks. Saat input mendapatkan fokus, hapus isi dari input tersebut.