แสดงข้อความใน Console เมื่อ Focus ที่ Input Field ด้วย JavaScript

ใช้ Event focus และ blur จัดการเมื่อเข้า/ออกจากช่องกรอก

ผูก event listener ให้ input element สำหรับ focus (เข้า) และ blur (ออก)

ตัวอย่างโค้ดเต็ม

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Focus Event</title>
</head>
<body>
  <input id="txtInput" placeholder="Enter the value......." />
  <button id="submitBtn">Submit</button>

  <script>
    const submitButton = document.getElementById('submitBtn');
    submitButton.addEventListener('click', () => {
      console.log('Submitting information to the server.....');
    });

    const txtInput = document.getElementById('txtInput');
    
    // เมื่อออกจากช่อง (blur) ให้ log และ focus กลับไปอัตโนมัติ
    txtInput.addEventListener('blur', () => {
      console.log('Enter the new value into the text box......');
      txtInput.focus(); // บังคับ focus กลับ
    });
    
    // เริ่มต้น focus ที่ช่องกรอก
    txtInput.focus();
  </script>
</body>
</html>

วิธีรัน

บันทึกเป็น index.html แล้วเปิดด้วย Live Server

คำอธิบาย

• focus event: เมื่อ element ได้รับโฟกัส (คลิก/Tab เข้าไป)
• blur event: เมื่อ element สูญเสียโฟกัส (คลิกนอก/Tab ออก)
• element.focus() บังคับให้ element นั้นได้รับโฟกัส
• ตัวอย่างนี้จะบังคับ focus อยู่ที่ช่องกรอกตลอด (ไม่ให้ออกได้)

การประยุกต์: Validation แบบ Real-time

input.addEventListener('blur', () => {
  if (!input.value) {
    input.classList.add('error');
  } else {
    input.classList.remove('error');
  }
});