jQuery UI Spinner - Able to exceed `max` by keyboard

Question

We are having issues with the jQuery UI spinner. When we set a max on the spinner, is is not possible to exceed this max when using the spinner button. However using the keyboard we can go to any number.

http://jsfiddle.net/Uygt2/

We need to allow users to use the keyboard as well though. Is there a standard solution for this in jQuery UI?

As you can see in this (http://jsfiddle.net/Uygt2/4/) updated fiddle from Rab Nawaz, the blur always gets called, which is causing our logic to run twice.

score 13 · Accepted Answer · edited May 23 '17 at 12:10

13

EDIT: to handle negative numbers. Thanks to Rzassar for pointing it out.

You can use oninput event: { 'keyup paste' for older browsers which don't support it }

Demo 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);
});

edited May 23 '17 at 12:10

Community

1
1

answered May 31 '13 at 12:04

A. Wolff

74,033
9
94
155

This seems to screw up with backspacing. E.g., use min:2, max:10 and try to change from 2 to 3 without using the arrow keys. You can't ever input, even if just temporarily while you're still editing. – sergiopereira Feb 25 '15 at 16:06
@sergiopereira I updated answer to take care of this behaviour, thx! – A. Wolff Feb 25 '15 at 19:05
One hole here is that you can use the delete key to generate a value that is less than the specified minimum. For example set a minimum of 4. Enter the value 43. Use delete key to remove 4. You are now left with 3. – kamelkev Jul 21 '16 at 16:42

score 0 · Answer 2 · answered May 31 '13 at 12:26

Just for reference, I came up with this solution myself:

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

        // min/max calculations
        callFunction();

    });

Which seems to work fine, but roasted's answer looks better.

score 0 · Answer 3 · answered Oct 31 '13 at 15:16

I know I've missed the boat, but for a self-containded spinner that acts in the way you require, you could use the spinchange event -

$('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 - Able to exceed `max` by keyboard

3 Answers3