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

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

รูปแบบ (Syntax)

อ่านค่า:

object.autofocus

กำหนดค่า:

object.autofocus = true | false

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

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

<!DOCTYPE html>
<html>
<head>
    <title>ตัวอย่าง autofocus property</title>
    <style>
        body { text-align: center; background-color: #1b203a; color: #ff8741; }
        p { font-size: 1.2rem; }
        input { border: none; background-color: #ffffff4a; height: 1.2rem; padding: 8px; color: #fff; font-weight: bold; font-size: 1rem; }
        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>สวัสดี! กดปุ่ม disable เพื่อปิด autofocus</p>
    <input type="number" autofocus value="23450004"> <br>
    <button onclick="disable()">ปิด autofocus</button>
    <script>
        function disable() {
            document.querySelector("input").autofocus = false;
        }
    </script>
</body>
</html>

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

• ควรใช้ autofocus เพียงหนึ่งอิลิเมนต์ต่อหน้า
• เหมาะสำหรับฟอร์มที่ช่องกรอกตัวเลขเป็นฟิลด์แรก/สำคัญที่สุด (เช่น ค้นหา, ล็อกอินด้วย PIN)
• หลีกเลี่ยงในหน้าที่มีเนื้อหามาก อาจทำให้ผู้ใช้สับสน
• สามารถใช้แอตทริบิวต์ autofocus ใน HTML โดยตรงได้