в jQuery пользовательского интерфейса спиннер - способен превышать `максимум` на клавиатуре

Question

в jQuery пользовательского интерфейса спиннер - способен превышать `максимум` на клавиатуре

У нас возникли проблемы с jQuery UI spinner. Когда мы устанавливаем максимум на спиннер, невозможно превысить этот максимум при использовании кнопки спиннера. Однако с помощью клавиатуры мы можем перейти к любому номеру.

Http://jsfiddle.net/Uygt2/

Мы должны позволить пользователям также использовать клавиатуру. Есть ли стандартное решение для этого в jQuery UI?

Как вы можете видеть в этом (http://jsfiddle.net/Uygt2/4 / ) обновленная скрипка от Рэба Наваза, blur всегда вызывается, что заставляет нашу логику работать дважды.

590 3

jQuery jquery-ui jquery-ui-spinner

3 ответов:

Comments

Ничего не найдено.

A. Wolff · Accepted Answer · 2017-05-23 15:10:17

Редактировать: для обработки отрицательных чисел. Благодаря 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);
});

Richard · Accepted Answer · 2013-05-31 15:26:22

Просто для справки, я сам придумал это решение:
    $("input").spinner({
        stop: function (event, ui) {
            $(this).change();
        }
    }).change(function () {

        // min/max calculations
        callFunction();

    });
Который, кажется, работает нормально, но ответ roasted выглядит лучше.

David Gard · Accepted Answer · 2013-10-31 17:16:10

Я знаю, что пропустил лодку, но для самодостаточного спиннера, который действует так, как вам нужно, вы могли бы использовать 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);
        }

    }
});