数量カウンター（- 1 +）
マイナス・数値・プラスの3つを横に並べた、数量を増減するためのカウンター UI です。EC の購入数指定や予約人数の調整など、キーボードで打ち込ませずにクリックだけで数を変えたい場面で活躍します。 真ん中の入力欄は readonly にしてあり、直接編集できないかわりに両端のボタンで値を上下させます。
解説
マイナス・数値・プラスの3つを横に並べた、数量を増減するためのカウンター UI です。EC の購入数指定や予約人数の調整など、キーボードで打ち込ませずにクリックだけで数を変えたい場面で活躍します。
真ん中の入力欄は readonly にしてあり、直接編集できないかわりに両端のボタンで値を上下させます。動作は JavaScript で、押されたボタンの data-d 属性に入った増減値を現在値に足し、Math.max で0を下回らないように制限しています。枠線で全体を一体のパーツとして囲み、ボタンはホバーで背景がわずかに濃くなって押せると分かります。
使う場面と調整ポイント
- カートや商品ページの購入数選択
- 予約フォームの人数や個数指定
- 設定画面での数値の段階調整
下限は Math.max の0、刻み幅はボタンの data-d で変えられ、在庫数などの上限を設けたい場合は同様に上限のチェックを加えます。読み上げ環境のために、ボタンには「数量を減らす」「数量を増やす」といった分かりやすいラベルを付けると操作の意味が伝わりやすくなります。
使用例・適したシーン
- お問い合わせフォーム
- ニュースレター登録
- 資料請求フォーム
- ログイン・新規登録
よくある質問
増減の幅や下限は変えられますか
変えられます。1回で増える量は各ボタンの data-d 属性、下限は JavaScript の Math.max の値で指定します。上限を設けたい場合は同じように最大値のチェックを足してください。
数字を直接入力させることはできますか
入力欄から readonly を外せばキーボード入力も可能になります。その場合は数値以外や範囲外の入力を弾く処理を加えると、誤った値が入るのを防げます。