เพิ่ม Default Search Text (Placeholder) ใน Search Box ด้วย JavaScript

ใช้ HTML5 placeholder Attribute หรือ JavaScript จัดการ Focus/Blur สำหรับ Default Text แบบ Custom

ตัวอย่าง (Vanilla JS - แนะนำ)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Search Placeholder</title>
  <style>
    .search-box { padding: 8px; font-size: 16px; width: 300px; }
    .search-box:focus { outline: 2px solid #007bff; }
  </style>
</head>
<body>
  <input type="text" id="textSearch" class="search-box" placeholder="Search the value" />
  <script>
    // Placeholder แบบ Native (แนะนำ) - ไม่ต้อง JS
    // JS Version สำหรับ Logic เฉพาะ:
    const input = document.getElementById('textSearch');
    const defaultText = 'John';
    
    // ถ้าต้องการค่า Default จริง ไม่ใช่ Placeholder
    input.value = defaultText;
    input.style.color = '#999';
    
    input.addEventListener('focus', () => {
      if (input.value === defaultText) {
        input.value = '';
        input.style.color = '#000';
      }
    });
    
    input.addEventListener('blur', () => {
      if (input.value === '') {
        input.value = defaultText;
        input.style.color = '#999';
      }
    });
  </script>
</body>
</html>

คำอธิบาย

• Native Placeholder: <input placeholder="Search..."> - ใช้ได้เลย ไม่ต้อง JS
• JS Default Value: ตั้ง value แล้ว Clear ตอน Focus, Restore ตอน Blur
• ใช้ focus และ blur Events
• สีสลับ: สีจางตอน Default, สีเข้มตอน User พิมพ์

ผลลัพธ์

โหลดหน้า: แสดง "John" สีจาง | คลิก Input: หายไป พิมพ์ได้ | Blur ว่าง: กลับมา "John" สีจาง