HTML DOM Input Number stepDown() Method: ลดค่าตัวเลข

เมธอด stepDown()ของ input type="number" ลดค่าตัวเลขลงตามจำนวนที่ระบุ (ค่าเริ่มต้น 1)

รูปแบบ (Syntax)

object.stepDown(number)

หากไม่ระบุ number จะลด 1

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

ปุ่มเพิ่ม/ลดค่าทีละ 10:

<!DOCTYPE html>
<html>
<head>
    <title>ตัวอย่าง stepUp/stepDown</title>
    <style>
        body { text-align: center; background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat; height: 100vh; color: #fff; }
        p { font-size: 1.5rem; }
        input { width: 40%; }
        button { background-color: #db133a; color: #fff; padding: 8px; border: none; width: 120px; margin: 1rem; border-radius: 50px; outline: none; cursor: pointer; }
    </style>
</head>
<body>
    <h1>ตัวอย่าง stepUp/stepDown Method</h1>
    <p>สวัสดี! อายุเท่าไหร่?</p>
    <input type="number"> <br>
    <button onclick="incValue()">เพิ่มค่า (StepUp)</button>
    <button onclick="decValue()">ลดค่า (StepDown)</button>
    <script>
        function incValue() { document.querySelector("input").stepUp(10); }
        function decValue() { document.querySelector("input").stepDown(10); }
    </script>
</body>
</html>

พฤติกรรมเมื่อถึงขอบเขต

• หากมี min attribute จะไม่ลดต่ำกว่าค่านั้น
• ทำงานร่วมกับ step attribute (ค่าเริ่มต้น 1)
• หาก step="5" แล้ว stepDown(1) จะลด 5 (ตาม step)

การใช้งานจริง

• ปุ่ม +/- สำหรับปรับจำนวนสินค้าในตะกร้า
• ปรับค่าพารามิเตอร์ใน dashboard/กราฟ
• Keyboard shortcut สำหรับ power user (Arrow up/down)