数量増減ステッパー（EC 用）
EC でおなじみの数量増減ステッパーです。中央の数値欄を − と + のボタンで挟み、クリックで 1 ずつ増減します。実装は input type=number を土台にしつつ、ボタンの data-step 属性に -1 / 1 を持たせ、JavaScript で現在値に加算する形です。
解説
EC でおなじみの数量増減ステッパーです。中央の数値欄を − と + のボタンで挟み、クリックで 1 ずつ増減します。実装は input type=number を土台にしつつ、ボタンの data-step 属性に -1 / 1 を持たせ、JavaScript で現在値に加算する形です。min と max の範囲（1〜99）を超えないようガードしているので、0 やマイナスにはなりません。
使う場面
- 商品ページのカート追加数量の選択
- 予約フォームの人数・席数指定
- 注文画面でのまとめ買い個数調整
ブラウザ標準のスピンボタンは appearance:none で消し、見た目を自前のボタンに統一しています。在庫上限に合わせて max を動的に書き換えたり、増減のたびに合計金額を再計算する処理を足すと実戦投入できます。キーボードからの直接入力も効くので、大きな数を入れたい場面にも対応できます。タッチ操作を考えると、ボタンの高さ 44px は押しやすさの目安になります。
使用例・適したシーン
- お問い合わせフォーム
- ニュースレター登録
- 資料請求フォーム
- ログイン・新規登録
よくある質問
上限の数を在庫数に合わせて変えられますか。
input の max 属性を在庫数で書き換えれば連動します。JavaScript 側も同じ上限を見て増やしすぎを防いでいるので、max を更新するだけで上限が切り替わります。
増減のたびに金額を更新したいです。
ボタンのクリック処理の末尾で、現在の数量に単価を掛けて表示要素へ書き込む 1 行を足せば、数量変更と同時に合計金額が更新されます。