HTML DOM Input Number stepUp() Method: เพิ่มค่าตัวเลข

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

รูปแบบ (Syntax)

object.stepUp(number)

หากไม่ระบุ number จะเพิ่ม 1

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

ปุ่มเพิ่ม/ลดค่าทีละ 10 (เหมือน stepDown แต่เน้น stepUp):

<!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>

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

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

การใช้งานร่วมกับ step attribute

<input type="number" step="100" value="1000">

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

• ปุ่มเพิ่มจำนวนสินค้าในตะกร้า (stepUp)
• ปรับค่าพารามิเตอร์ขนาดใหญ่ (step=100, 1000)
• ร่วมกับ keyboard event (ArrowUp/ArrowDown)