6

jQuery UI スピナーに問題があります。スピナーに最大値を設定すると、スピナー ボタンを使用するときにこの最大値を超えることはできません。ただし、キーボードを使用すると、任意の番号に移動できます。

http://jsfiddle.net/Uygt2/

ただし、ユーザーがキーボードを使用できるようにする必要があります。jQuery UIでこれに対する標準的な解決策はありますか?

この ( http://jsfiddle.net/Uygt2/4/ ) Rab Nawaz から更新されたフィドルでわかるように、blur常に呼び出されるため、ロジックが 2 回実行されます。

4

3 に答える 3

13

編集:負の数を処理します。それを指摘してくれたRzassarに感謝します。

oninput イベントを使用できます: {サポートしていない古いブラウザーの場合は'keyup paste' }

デモjsFiddle

$("input").spinner({
    max: 10,
    min: -10
}).on('input', function () {
    if ($(this).data('onInputPrevented')) return;
    var val = this.value,
        $this = $(this),
        max = $this.spinner('option', 'max'),
        min = $this.spinner('option', 'min');
    // We want only number, no alpha. 
    // We set it to previous default value.         
    if (!val.match(/^[+-]?[\d]{0,}$/)) val = $(this).data('defaultValue');
    this.value = val > max ? max : val < min ? min : val;
}).on('keydown', function (e) {
    // we set default value for spinner.
    if (!$(this).data('defaultValue')) $(this).data('defaultValue', this.value);
    // To handle backspace
    $(this).data('onInputPrevented', e.which === 8 ? true : false);
});
于 2013-05-31T12:04:57.977 に答える
0

私はボートに乗り遅れたことを知っていますが、必要な方法で動作する自己完結型のスピナーの場合、spinchangeイベントを使用できます-

$('input').spinner({
    min: 0,
    max: 3,
    page: 10,
    change: function(event, ui){

        var value = this.value
            min = this.min,
            max = this.max;

        if (!value.match(/^\d+$/)){ // Value is non-numerical

            /** Set the value to the previous value */
            value = 0 

        } else { // Value is numerical

            /** Check that value falls within min and max range */
            if(value > max){
                value = max;
            } else if(value < min){
                value = min;
            }

        }

        /** Send the correct value to the spinner (if it needs changing) */
        if(value !== this.value){
            $(this).spinner("value", value);
        }

    }
});
于 2013-10-31T15:16:10.747 に答える
0

参考までに、私はこの解決策を自分で思いつきました：

    $("input").spinner({
        stop: function (event, ui) {
            $(this).change();
        }
    }).change(function () {

        // min/max calculations
        callFunction();

    });

これはうまくいくようですが、roastedの答えはより良く見えます。

于 2013-05-31T12:26:22.827 に答える