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

Event onfocus ทริกเกอร์เมื่อ Element ได้รับ Focus — ไม่ Bubble (ต่างจาก focusin)

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

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

คำอธิบาย

• ทริกเกอร์: Click, Tab, element.focus(), Autofocus
• ไม่ Bubble → ไม่จับได้ที่ Parent ด้วย Event Delegation (ต้องใช้ focusin แทน)
• คู่กับ onblur (Focus Lost)

Focus Event Types

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

• Highlight Field: input.addEventListener('focus', () => input.style.borderColor = 'blue')
• Show Tooltip/Help: แสดง Hint เมื่อ Focus
• Select All Text: input.addEventListener('focus', () => input.select())
• Track Focus State: สำหรับ Accessibility (ARIA)

รูปแบบมาตรฐาน

const input = document.querySelector('input');
input.addEventListener('focus', () => {
  input.style.outline = '2px solid #0066cc';
});
input.addEventListener('blur', () => {
  input.style.outline = 'none';
});