แอตทริบิวต์ autofocus ของ <button>: โฟกัสอัตโนมัติเมื่อโหลดหน้า

แอตทริบิวต์ autofocus ของ <button> คืออะไร?

แอตทริบิวต์ autofocus ของแท็ก <button> ใช้สำหรับ ทำให้ปุ่มได้รับโฟกัส (Focus) อัตโนมัติเมื่อหน้าเว็บโหลดเสร็จ ผู้ใช้สามารถกด Enter เพื่อกดปุ่มได้ทันทีโดยไม่ต้องคลิกหรือ Tab มาก่อน

ไวยากรณ์ (Syntax)

<button type="button" autofocus>ข้อความปุ่ม</button>

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

<!DOCTYPE html>
<html>
<body>
  <h2>หัวข้อตัวอย่าง</h2>
  <p>นี่คือบรรทัดตัวอย่าง</p>
  <button type="button" autofocus>Demo</button>
</body>
</html>

ผลลัพธ์

เมื่อโหลดหน้าเว็บ ปุ่ม "Demo" จะมีขอบโฟกัส (Outline) รอบๆ ปุ่ม ทันที ผู้ใช้กด Enter ได้เลย

ข้อควรระวัง

• ควรมีเพียง **1 อิลิเมนต์** ต่อหน้าที่มี autofocus (เบราวเซอร์จะเลือกตัวแรกสุด)
• อาจรบกวนการนำทางด้วยคีย์บอร์ดของผู้ใช้บางคน (Accessibility)
• ไม่ควรใช้ในหน้าที่มีฟอร์มสำคัญที่ต้องการให้ผู้ใช้กรอกข้อมูลก่อน
• เป็น Boolean Attribute: เขียนแค่ autofocus หรือ autofocus="autofocus" ก็ได้

รองรับใน

• <button>, <input>, <select>, <textarea>, <a> (HTML5)