HTML DOM Input Checkbox autofocus Property: การโฟกัสอัตโนมัติ

คุณสมบัติ autofocus ของ checkbox คืนค่าและกำหนดว่า checkbox ควรได้รับโฟกัสอัตโนมัติเมื่อหน้าเว็บโหลดเสร็จหรือไม่

รูปแบบ (Syntax)

อ่านค่า:

object.autofocus

กำหนดค่า:

object.autofocus = true | false

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

checkbox มี autofocus อยู่แล้ว คลิกปุ่มเพื่อปิด autofocus:

<!DOCTYPE html>
<html>
<head>
    <style>
        body { text-align: center; }
        p { font-size: 1.5rem; color: #ff8741; }
        input { width: 30px; height: 30px; outline: 2px solid #db133a; }
        button { background-color: #db133a; color: #fff; padding: 8px; border: none; width: 120px; margin: 0.5rem; border-radius: 50px; outline: none; cursor: pointer; }
    </style>
</head>
<body>
    <h1>ตัวอย่าง autofocus Property</h1>
    <p>ต้องการความช่วยเหลือ?</p>
    <input type="checkbox" autofocus> <br>
    <button onclick="disableAutofocus()">ปิด Autofocus</button>
    <script>
        function disableAutofocus() {
            document.querySelector("input").autofocus = false;
        }
    </script>
</body>
</html>

คำแนะนำการใช้งาน

• ควรใช้ autofocus เพียงหนึ่งอิลิเมนต์ต่อหน้าเว็บ
• ช่วยเพิ่มประสบการณ์ผู้ใช้ในฟอร์มสั้น (เช่น ล็อกอิน ค้นหา)
• หลีกเลี่ยงในฟอร์มยาวหรือหน้าที่มีเนื้อหามาก เพราะอาจเลื่อนหน้าจอไปที่ช่องนั้นโดยไม่คาดคิด
• สามารถใช้แอตทริบิวต์ autofocus ใน HTML โดยตรงได้: <input type="checkbox" autofocus>