【jQuery】数値を「＋/−」で増減させるフォームの実装【スピナーボタン】

数値を＋ボタン、もしくは−ボタンで増減させるフォームを実装する方法の解説記事です。

完成のイメージはこんな感じ。

ECサイトでよく見かけますよね。

数値の部分がテキストボックスのフォームはよく見かけたのですが、個人的に、数字を直接変えることができないような仕様にしたかったので、今回作成しました。

この記事を書いている私（わや@wayasblog）は、Web制作会社でエンジニアとして働いています。

勉強を兼ねて個人的な開発をしている時にこの実装をしようと思ったのですが、意外にも時間がかかってしまったので、備忘録として残しておきます。

クリックできる目次

前提となる知識
数値を「＋/−」で増減させるフォームの実装
【まとめ】数値を「＋/−」で増減させるフォームの実装【スピナーボタン】
最後に宣伝

前提となる知識

そもそも、inputのtype属性をnumberにすると、以下のようなフォームになります。

※実際に動くので、触ってみてください。

「スピナーボタン」と呼ぶみたいですね。

これはHTML5から追加されたようです。

このまま使うには使いづらいですし、ブラウザによっては対応していません。

iPhoneだと、普通のテキストボックスになってしまっています。

なので、今回はこれを改造していきます。

数値を「＋/−」で増減させるフォームの実装

では、さっそくCodePenでコードを見ていきましょう！

See the Pen spinner by wayasblog (@wayasblog) on CodePen.

工夫したところは、数値が０になたら−ボタンを非アクティブにし、数値が最大値になったら＋ボタンを非アクティブにしたところです。

コピペすれば動きますが、それぞれ解説していきますね。

HTMLの解説

<div class="spinner-container">
    <span class="spinner-sub disabled">-</span>
    <input class="spinner" type="number" min="0" max="5" value="0">
    <span class="spinner-add">+</span>
</div>

type属性はnumberです。

そしてmin属性とmax属性で、数値の最小値と最大値を指定しています。

HTMLに関しては、難しいことはないと思います。

CSSの解説

特別なことはないですが、少しだけ解説していきます。

.spinner-container {
    display: flex;
    justify-content: center;
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

user-select: none;という部分で、ユーザーがボタンを押した時に文章を範囲選択できないようにしています。

これを書かないと、ボタンを押した時に以下のようになってしまうので、邪魔ですよね。

最後に、以下のようdisableクラスを作っています。

.disabled {
    opacity: 0.3;
    cursor: inherit;
}

このクラスをjQueryで付与したり外したりすることで、最小値と最大値の時に押せないボタンだよ、ということを表しています。

jQueryの解説

jQueryを使っているので、読み込むのを忘れないようにしてください。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

今回はspinnerクラスのついたフォームに対してeach()メソッドを使い、くり返しの処理を行うようにしています。

$('.spinner').each(function() {

次に、扱いやすいようにそれぞれを変数にしています。

var el  = $(this);
var add = $('.spinner-add');
var sub = $('.spinner-sub');

−ボタンを押した時の動作が、以下の部分です。

// substract
// −ボタンを押した時のクリックイベント
el.parent().on('click', '.spinner-sub', function() {
// もし.spinnerのvalueが最小値よりも大きかったら
    if (el.val() > parseInt(el.attr('min'))) {
// valueの値を-1する
        el.val(function(i, oldval) {
            return --oldval;
        });
    }
// disabled
// もし.spinnerのvalueが最小値と同じだったら
    if (el.val() == parseInt(el.attr('min'))) {
// .spinnerの直前のspinner-subクラスにdisabledを付与する
        el.prev(sub).addClass('disabled');
    }
// もし.spinnerのvalueが最大値より小さかったら
    if (el.val() < parseInt(el.attr('max'))) {
// .spinnerの直後のspinner-addクラスのdisabledを外す
        el.next(add).removeClass('disabled');
    }
});

＋ボタンの動作は、−ボタンの逆ですね。

// increment
//＋ボタンを押した時のクリックイベント
el.parent().on('click', '.spinner-add', function() {
// もし.spinnerのvalueが最大値よりも小さかったら
    if (el.val() < parseInt(el.attr('max'))) {
// valueの値を+1する
        el.val(function(i, oldval) {
            return ++oldval;
        });
    }
// disabled
// もし.spinnerのvalueが最小値より大きかったら
    if (el.val() > parseInt(el.attr('min'))) {
// .spinnerの直前のspinner-subクラスのdisabledを外す
        el.prev(sub).removeClass('disabled');
    }
// もし.spinnerのvalueが最大値と同じだったら
    if (el.val() == parseInt(el.attr('max'))) {
// .spinnerの直後のspinner-addクラスにdisabledを付与する
        el.next(add).addClass('disabled');
    }
});

これで完成です＼(^o^)／