การดำเนินการสคริปต์เมื่อองค์ประกอบสูญเสียโฟกัส (Blur) ใน HTML

ใช้แอตทริบิวต์ onblur เพื่อดำเนินการสคริปต์เมื่อองค์ประกอบสูญเสียโฟกัส (Focus) ใน HTML

ตัวอย่าง

ลองรันโค้ดต่อไปนี้เพื่อใช้งานแอตทริบิวต์ onblur:

<!DOCTYPE html>
<html>
  <body>
    <p>Type text below!</p>
    Country: <input type="text" name="myid" id="myid" onblur="toUpperCase(this)">
    <script>
      function toUpperCase(input) {
        input.value = input.value.toUpperCase();
      }
    </script>
  </body>
</html>

Focus และ Blur Events

ตัวอย่างการใช้งานจริง

1. Auto-format ข้อมูลเมื่อ Blur

<input type="text" id="phone" placeholder="Phone" onblur="formatPhone(this)">

<script>
function formatPhone(input) {
  let val = input.value.replace(/\D/g, ''); // เก็บตัวเลขอย่างเดียว
  if (val.length === 10) {
    val = val.replace(/(\d{3})(\d{3})(\d{4})/, '$1-$2-$3');
  }
  input.value = val;
}
</script>

2. Validate Field เมื่อ Blur

<input type="email" id="email" onblur="validateEmail(this)">
<span id="emailError" class="error"></span>

<script>
function validateEmail(input) {
  const errorEl = document.getElementById('emailError');
  if (input.value && !input.checkValidity()) {
    errorEl.textContent = 'Invalid email format';
    input.classList.add('invalid');
  } else {
    errorEl.textContent = '';
    input.classList.remove('invalid');
  }
}
</script>

3. Auto-save Draft เมื่อ Blur

<textarea id="editor" onblur="autoSave(this.value)"></textarea>

<script>
function autoSave(content) {
  localStorage.setItem('draft', content);
  console.log('Draft saved');
}

// โหลด Draft ตอนโหลดหน้า
window.addEventListener('load', () => {
  document.getElementById('editor').value = localStorage.getItem('draft') || '';
});
</script>

Focus/Blur และ Event Delegation

เนื่องจาก focus และ blur ไม่ Bubble ให้ใช้ focusin/focusout สำหรับ Event Delegation:

<form id="myForm">
  <input name="field1">
  <input name="field2">
  <textarea name="field3"></textarea>
</form>

<script>
const form = document.getElementById('myForm');

form.addEventListener('focusin', (e) => {
  e.target.closest('input, textarea')?.classList.add('focused');
});

form.addEventListener('focusout', (e) => {
  e.target.closest('input, textarea')?.classList.remove('focused');
});
</script>

CSS :focus และ :focus-visible

input:focus, textarea:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0,123,255,0.25);
}

/* แสดง outline เฉพาะเมื่อ Tab (Keyboard) ไม่ใช่ Click */
input:focus-visible, textarea:focus-visible {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}