JQuery UI Spinner - Ability to exceed `max` from the keyboard

Question

We are having problems with jQuery UI spinner. When we set max on the counter, it is impossible to use this maximum when using the counter button. However, using the keyboard we can go to any number.

http://jsfiddle.net/Uygt2/

We must also allow users to use the keyboard. Is there a standard solution for this in the jQuery user interface?

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

Answer 1

EDIT: for handling negative numbers. Thanks to Rzassar for pointing him out.

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

JsFiddle demo

 $("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

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

  $("input").spinner({ stop: function (event, ui) { $(this).change(); } }).change(function () { // min/max calculations callFunction(); }); 

Everything seems to be working fine, but the roasted answer looks better.

Answer 3

I know that I missed the boat, but for a standalone counter that acts the way you need, you can 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); } } });