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

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

รูปแบบ (Syntax)

อ่านค่า:

object.autofocus

กำหนดค่า:

object.autofocus = true | false

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

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

<!DOCTYPE html>
<html>
<head>
    <title>ตัวอย่าง autofocus property</title>
    <style>
        body { text-align: center; }
        p { font-size: 1.5rem; color: #ff8741; }
        input {}
        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="month" autofocus value="2019-03"> <br>
    <button onclick="disable()">ปิด autofocus</button>
    <script>
        function disable() {
            document.querySelector("input").autofocus = false;
        }
    </script>
</body>
</html>

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

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