วิธีการ focus และ blur ใน JavaScript

คุณรู้แล้วว่าโฟกัสอินพุตคืออะไร คุณยังรู้วิธีตั้งค่าหรือสูญเสียโฟกัสอีกด้วย: ในการตั้งค่า คุณต้องคลิกที่ช่องอินพุต และเพื่อให้สูญเสียโฟกัส - ให้คลิกที่อื่น

อย่างไรก็ตาม ใน JavaScript มีเมธอดพิเศษที่อนุญาตให้บังคับตั้งค่าโฟกัสในอินพุตหรือลบออกจากที่นั่นได้ นี่คือเมธอด focus และ blur

มาดูการทำงานของมันผ่านตัวอย่างกัน สมมติว่าเรามีอินพุตและปุ่มแบบนี้:

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

เมื่อคลิกที่ปุ่ม ให้ตั้งค่าโฟกัสอินพุตไปที่อินพุตของเรา:

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

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

มีอินพุตสองช่อง จัดการให้หลังจากป้อนอักขระสองตัว โฟกัสอินพุตจะย้ายไปยังอินพุตที่สอง และหลังจากป้อนอักขระสองตัวในอินพุตนี้ - โฟกัสจะถูกลบออกจากมัน