Question

我们遇到了jQuery UI微调器的问题。当我们在微调器上设置最大值时，使用微调器按钮时不可能超过此最大值。但是使用键盘我们可以去任何数字。

我们还需要允许用户使用键盘。在jQuery UI中是否有针对此的标准解决方案？

正如你在Rab Nawaz的这个（http://jsfiddle.net/Uygt2/4/）更新的小提琴中看到的那样，blur总是被调用，这导致我们的逻辑运行两次。

Answer 1

编辑：处理负数。感谢Rzassar指出它。

您可以使用oninput事件：{'keyup paste'适用于不支持它的旧浏览器}

$("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);
});

Answer 2

仅供参考，我自己想出了这个解决方案：

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

        // min/max calculations
        callFunction();

    });

这似乎工作正常，但roasted的答案看起来更好。

Answer 3

我知道我错过了这条船，但是对于一个以您需要的方式行事的独立旋转器，您可以使用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);
        }

    }
});

jQuery UI Spinner - 能够通过键盘超过“max”

3 个答案: