4
'<label id="quantite" for="quantite">Quantite : </label><input id="QteSpinner" value="1"></br>'

[...]

var newSpinner = $( "#QteSpinner" ).spinner({
            min: 1
        });

How could I restrict the user to only type numbers in a JQuery spinner like this one?

Thanks

seb68
  • 269
  • 2
  • 9

6 Answers6

3

Use

{decimals:0}

or

{min:0}

or both together in the options

itsazzad
  • 6,868
  • 7
  • 69
  • 89
2

Take a look at this fiddle link. I have created one sample which will restrict negative numbers in the spinner.

    var value;
    var $container=$("#QteSpinner");
    var newSpinner = $container.spinner({
        min: 1,
    }).focus(function () {
        value = $container.val();
    }).blur(function () {
        var value1 = $container.val();
        if (value1<0) {
           $container.val(value);
        }
        if(isNaN(value1))
        {
           $container.val(value);
        } 

    });

I hope this will help you more.

Karthi Keyan
  • 4,243
  • 5
  • 24
  • 47
  • Thank you, but the problem isn't restricting the range of the number, but restricting the user to only type a number. Currently he could type "foo" without problem. And that's a problem. – seb68 May 24 '13 at 15:04
  • @seb68, Take a look at my answer once again, I have updated my answer with the updated fiddle link. this will restrict alphabets in the spinner. i hope this will help you. – Karthi Keyan May 24 '13 at 15:15
  • Thank you, but I want that user can only type number. I want to block the display of letters. For example, when I type "f", it doesn't have to work. With this code, the user can type "foo" even if the letters dissapears when we don't have focus. – seb68 May 24 '13 at 19:09
1

Use a change function to map non-integer inputs to a suitable default value, e.g

var myspinner = $( "#myspinner" ).spinner(
    { 
    min: 1,
    change: function (event, ui ) {
        var val = myspinner.spinner( "value" );
        myspinner.spinner("value", parseInt(val,10) || 1);
        /* 
        var val = $(this).spinner( "value" );
        $(this).spinner("value", parseInt(val,10) || 1);
        */
    }
    });

This won't prevent the user from typing nonsense, but it will constrain the values in the spinner as soon as the spinner loses focus. If you absolutely must block typing of anything but numbers, you might be able to do something with the keypress() function. See jquery to check when a someone starts typing in to a field for more details.

cowboycb
  • 539
  • 5
  • 11
Mike Ellis
  • 1,120
  • 1
  • 12
  • 27
0

This is how I did it:

jQuery( "#spinner" ).spinner({ min: 0 });

jQuery( "#spinner").keyup(function() {
            if(  isNaN (jQuery(this).val() )){ //Only numbers !
                jQuery(this).prop("value", "0") ; //Back to 0, as it is the minimum
            }
      });

Done.

Francisco Corrales Morales
  • 3,676
  • 1
  • 37
  • 64
0

A slight improvement on Francisco Corrales Morales's as it does not zero out the field. It only removes the alpha entry

jQuery( "#repeat_x").keyup(function() { 
if(isNaN (jQuery(this).val() )){
    /* however only slicing off the last character instead of setting to 0 */
    jQuery(this).prop("value",jQuery(this).prop("value").slice(0, -1));
}

});

Jay Lepore
  • 85
  • 1
  • 7
0

Or you can check for the keystroke value, and then use $.isNumeric() to test it, like :

$("#spinner").spinner({
    min: 1
}).keypress(function(e){
    key = e["originalEvent"]["key"];
    if (!$.isNumeric(key)){
        e.preventDefault();
    }
});
Pierre GOUCHET
  • 1