Tiêu điểm của trường văn bản trong JavaScript

Giả sử chúng ta có một ô nhập liệu (input). Bạn có thể nhấp vào ô nhập liệu này và sau đó con trỏ nhấp nháy sẽ xuất hiện và bạn có thể nhập văn bản vào đó.

Về trạng thái như vậy, người ta nói rằng ô nhập liệu hiện đang có tiêu điểm nhập liệu. Trong thực tế, điều này có nghĩa là nếu bạn bắt đầu nhập văn bản từ bàn phím, thì văn bản đó sẽ đi vào ô nhập liệu hiện đang có tiêu điểm nhập liệu. Nếu sau đó bạn nhấp vào bất kỳ đâu bên ngoài ô nhập liệu, thì ô nhập liệu đó sẽ mất tiêu điểm nhập liệu và bạn không thể nhập văn bản vào đó được nữa.

Để bắt được thời điểm nhận hoặc mất tiêu điểm của ô nhập liệu, trong JavaScript có các sự kiện đặc biệt: sự kiện focus cho phép bắt khi ô nhập liệu nhận tiêu điểm, và sự kiện blur - khi mất tiêu điểm. Hãy thử trong thực tế. Giả sử chúng ta có ô nhập liệu:

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

Lấy tham chiếu đến nó vào một biến:

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

Và bây giờ hãy làm sao cho khi nhận được tiêu điểm, văn bản hiện tại của ô nhập liệu sẽ được in ra console:

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

Cho một ô nhập liệu. Khi nhận tiêu điểm, hãy ghi vào nó số 1, và khi mất tiêu điểm - số 2.

Cho một ô nhập liệu. Giả sử một số được nhập vào đó. Khi mất tiêu điểm, hãy xuất ra màn hình bình phương của số đó.

Cho một ô nhập liệu, ban đầu có sẵn một số văn bản. Khi ô nhập liệu nhận tiêu điểm, hãy xóa nội dung của ô nhập liệu đó.