การใช้งาน Event onblur ใน JavaScript

Event onblur ทริกเกอร์เมื่อ Element สูญเสีย Focus — ไม่ Bubble (ต่างจาก focusout)

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

<!DOCTYPE html>
<html>
  <body>
    <p>Write below:</p>
    <input type="text" onblur="newFunc(this)">
    <script>
      function newFunc(a) {
        a.style.background = "green";
      }
    </script>
  </body>
</html>

คำอธิบาย

• ทริกเกอร์: Click นอก Element, Tab ออก, element.blur()
• ไม่ Bubble → จับที่ Element โดยตรง (ใช้ focusout สำหรับ Delegation)
• คู่กับ onfocus (Focus Gained)

การใช้งานจริง

• Validate On Blur: ตรวจสอบค่าเมื่อ User ออกจาก Field
• Save Draft: Auto-save เมื่อ Blur
• Format Value: Format Phone/Date/Currency หลัง Blur
• Hide Tooltip: ซ่อน Help Text

ตัวอย่าง: Validate Email On Blur

const email = document.querySelector('input[type="email"]');
email.addEventListener('blur', () => {
  if (email.value && !email.checkValidity()) {
    email.style.borderColor = 'red';
    email.setCustomValidity('Invalid email format');
    email.reportValidity();
  } else {
    email.style.borderColor = 'green';
    email.setCustomValidity('');
  }
});

Focus Event Flow Summary

User clicks input1 → focus (input1) → focusin (bubbles)
User clicks input2 → focusout (input1) → blur (input1) → focus (input2) → focusin (bubbles)

Best Practice: ใช้ focusout สำหรับ Form Validation Delegation ใช้ blur สำหรับ Logic เฉพาะ Field