Phương thức stepDown() của <input type="number"> **giảm** giá trị số xuống một khoảng xác định. Nếu bỏ qua tham số, mặc định giảm theo step (mặc định 1).
Cú pháp
numberInput.stepDown(number)
number (tùy chọn): Số lượng muốn giảm. Mặc định = step attribute (thường là 1).
Ví dụ: Tăng/giảm số bằng nút bấm (bước 10)
<!DOCTYPE html>
<html>
<head>
<title>Demo stepUp()/stepDown() Number</title>
<style>
body { text-align: center; background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat; height: 100vh; color: white; font-family: sans-serif; }
p { font-size: 1.5rem; }
input[type="number"] { width: 40%; padding: 8px; }
button {
background-color: #dc3545; color: white; padding: 8px 16px;
border: none; width: 140px; margin: 10px; border-radius: 25px;
outline: none; cursor: pointer; font-weight: bold;
}
</style>
</head>
<body>
<h1>Demo stepUp()/stepDown() Number</h1>
<p>Bạn bao nhiêu tuổi?</p>
<input type="number" id="numInput">
<br><br>
<button onclick="incValue()">Tăng (+10) stepUp</button>
<button onclick="decValue()">Giảm (-10) stepDown</button>
<script>
function incValue() { document.getElementById("numInput").stepUp(10); }
function decValue() { document.getElementById("numInput").stepDown(10); }
</script>
</body>
</html>
Kết quả
Ban đầu:

Nhấn "Tăng (+10)" hoặc "Giảm (-10)":


💡 Ứng dụng: Tạo điều khiển số lượng giỏ hàng (+/-), bộ lọc giá, nhập liệu nhanh. Kết hợp
step attribute để đổi bước nhảy (VD: step="0.5" cho điểm số, step="100" cho tiền VNĐ).