Các phương thức focus và blur trong JavaScript

Bạn đã biết tiêu điểm nhập liệu là gì. Bạn cũng biết cách thiết lập hoặc làm mất tiêu điểm: để thiết lập cần nhấp vào trường nhập liệu, còn để làm mất - nhấp vào một nơi nào đó khác.

Tuy nhiên, trong JavaScript, tồn tại các phương thức đặc biệt cho phép ép buộc thiết lập tiêu điểm vào ô nhập hoặc loại bỏ nó khỏi đó. Đó là các phương thức focus và blur.

Hãy xem hoạt động của chúng qua ví dụ. Giả sử chúng ta có một ô nhập và một nút như sau:

<input id="elem" value="text">
<input type="submit" id="button">

Hãy thiết lập tiêu điểm nhập liệu vào ô nhập của chúng ta khi nhấn nút:

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

button.addEventListener('click', function() {
	elem.focus();
});

Cho hai ô nhập liệu. Hãy làm sao để sau khi nhập hai ký tự, tiêu điểm nhập liệu chuyển sang ô nhập liệu thứ hai, và sau khi nhập hai ký tự vào ô nhập liệu này - tiêu điểm bị loại bỏ khỏi nó.