数量ステッパー

解説

数量ステッパーは、マイナスとプラスのボタンで数値を 1 ずつ増減させる入力パーツです。中央の入力欄は readonly にして直接編集をさせず、ボタン操作だけで値を変えることで、想定外の文字や空欄が入るのを防いでいます。JavaScript は内部のカウンタ変数を増減し、その値を入力欄へ反映するだけのわかりやすい構成で、マイナス側には 1 を下回らないようにする下限チェックが入っています。

よく使う場面

• カートやフォームでの購入数・人数の指定
• 予約システムの宿泊数やチケット枚数
• 設定画面での回数や個数のような小さな数値入力

増減の刻みはカウンタへ足し引きする値で変えられ、上限を設けたい場合はプラス側にも条件を足します。注意点として、見た目だけでなく送信時に正しい数値が渡るよう、フォーム連携では name 付きの入力欄に値を入れる設計にしてください。アクセシビリティ面では、各ボタンに役割がわかるラベルを付け、キーボードでも増減できるようにすると、より使いやすくなります。