เมธอด hasFocus() ใน HTML DOM

เมธอด hasFocus() ใน HTML DOM ใช้สำหรับตรวจสอบว่าเอกสารหรือองค์ประกอบภายในเอกสารมีโฟกัส (focus) อยู่หรือไม่ โดยคืนค่า Boolean: true แทนว่ามีโฟกัส false แทนว่าไม่มีโฟกัส

ไวยากรณ์ (Syntax)

document.hasFocus()

ตัวอย่าง

ตัวอย่างการตรวจสอบโฟกัสของเอกสารแบบเรียลไทม์:

<!DOCTYPE html>
<html>
<body>
<h1>เมธอด hasFocus()</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
<button id="BTN1">CHECK</button>
<script>
  setInterval("checkFocus()", 20);
  
  function checkFocus() {
    var btn = document.getElementById("BTN1");
    if (document.hasFocus()) {
      btn.innerHTML = "FOCUSED";
    } else {
      btn.innerHTML = "NOT FOCUSED";
    }
  }
</script>
</body>
</html>

ผลลัพธ์

เมื่อโหลดหน้าเว็บ ปุ่มจะแสดง "FOCUSED" (เพราะหน้าต่างมีโฟกัส)

เมื่อคลิกนอกหน้าต่างเบราว์เซอร์ (ทำให้สูญเสียโฟกัส) ปุ่มจะเปลี่ยนเป็น "NOT FOCUSED"

เมื่อคลิกกลับมาที่หน้าต่าง ปุ่มจะกลับเป็น "FOCUSED" อีกครั้ง

คำอธิบายโค้ด

• สร้างปุ่ม id="BTN1" แสดงสถานะโฟกัส
• ใช้ setInterval("checkFocus()", 20) เรียก checkFocus() ทุก 20 มิลลิวินาที
• checkFocus() ดึงปุ่ม แล้วตรวจสอบ document.hasFocus()
• หาก true ตั้งค่า innerHTML = "FOCUSED" หาก false ตั้งค่า "NOT FOCUSED"
• การตรวจสอบซ้ำๆ ทำให้อัปเดตสถานะแบบเรียลไทม์เมื่อผู้ใช้สลับหน้าต่าง