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

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

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

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

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

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

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

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