Fokus Medan Teks dalam JavaScript

Katakanlah kita mempunyai satu input. Anda boleh klik pada input ini dan selepas itu kursor akan berkelip dan anda boleh mula menaip teks ke dalamnya.

Keadaan ini dikatakan bahawa input tersebut sedang mempunyai fokus input. Dalam praktiknya, ini bermaksud jika anda mula menaip teks dari papan kekunci, teks tersebut akan masuk ke dalam input yang sedang mempunyai fokus input. Jika kemudian anda klik di mana-mana di luar input, input tersebut akan kehilangan fokus input dan teks tidak boleh lagi ditaip ke dalamnya.

Untuk menangkap saat input mendapat atau kehilangan fokus, JavaScript menyediakan acara khas: Acara focus membolehkan kita menangkap saat input mendapat fokus, manakala acara blur - saat kehilangan fokus. Mari kita cuba dalam praktik. Katakan kita mempunyai input:

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

Dapatkan rujukan kepadanya dalam pembolehubah:

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

Sekarang, mari kita buat supaya apabila mendapat fokus, teks semasa input dicetak ke konsol:

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

Diberi satu input. Apabila mendapat fokus, tuliskan nombor 1 ke dalamnya, dan apabila kehilangan fokus - nombor 2.

Diberi satu input. Katakan nombor ditaip ke dalamnya. Apabila kehilangan fokus, paparkan kuasa dua bagi nombor tersebut.

Diberi satu input, yang pada asalnya mengandungi beberapa teks. Apabila input mendapat fokus, kosongkan kandungan input tersebut.