jQuery Spinner: Non-numerical values

Question

I am using the jQuery Spinner, with min (0) and max (500) values set up. What can I do to prevent the user from directly entering non-numerical values (or values outside the 0-500 range) in the input box? The min and max values work when the user uses the spinner buttons, but not when something is typed into the input form.

I found a nice [posting](http://stackoverflow.com/questions/891696/jquery-what-is-the-best-way-to-restrict-number-only-input-for-textboxes-all) by Keith Bentrup that taught me how to make sure that only numerical values can be added to the input. Still, I am not sure how to restrict numerical values to a specific range. — AndraD, Jan 08 '13 at 00:30
See my example. It's not very elegant, but it was meant to prove the point. As soon as you start fiddling with user input programmatically, it becomes a bit weird. Best use the numeric plugin, and warn users about the range. — , Jan 08 '13 at 00:33

score 8 · Accepted Answer · answered Jan 08 '13 at 00:31

8

You can force numeric input using a technique like this:

var MIN = 0;
var MAX = 500;

$('#foo').on('keyup', function(e) {
  var v = parseInt($(this).val());
  if (isNaN(v)) {
     return $(this).val(MIN);
  }
  if ($(this).val() < MIN) {
     $(this).val(MIN);
  } else if ($(this).val() > MAX) {
     $(this).val(MAX); 
  } else {
     $(this).val(v);
  }
});

(See example: http://jsfiddle.net/foxbunny/ustFf/)

But I do not recommend it. It's not the expected text box behavior, and it tends to confuse at least some of the users. So it's better to just display a warning if the value is not in the expected range.

answered Jan 08 '13 at 00:31

Thank you for your input! I am still trying to figure out how best to use the spinner in my case, but your comments helped a lot! – AndraD Jan 08 '13 at 00:46
It could just be me, but one lesson I've learned about UX is that it usually works best if you use the oldest technique possible that can get the job done. Simply because people have had most exposure to it. But then again, there _are_ brilliant ideas that just work, despite being new. (Spinners just aren't in that category.) :) – Jan 08 '13 at 00:50
I'm totally in accordance with your recommendation. – PhoneixS Sep 03 '13 at 16:32

score 0 · Answer 2 · answered Jan 08 '13 at 00:35

0

You could set it to readOnly:

document.getElementById('mySpinner').readOnly = true;

answered Jan 08 '13 at 00:35

Hugo

6,244
8
37
43

2

I am not sure this is a good idea. What if the user wants to enter a large value, such as 300? – AndraD Jan 08 '13 at 00:39
@Alexandra: Spinner is only good if you expect users to enter small ranges of values. Otherwise, it requires some fine motor action from the hand operating the mouse. I can't see why anyone would use the spinner for rangers larger than 10~20 integer values. – Jan 08 '13 at 00:43
1

then you could listen to the 'change' event, check the input to make sure it is only numbers and if not, clear it or set it its last valid value. – Hugo Jan 08 '13 at 00:46

score 0 · Answer 3 · answered Sep 02 '14 at 04:11

I think this is the proper way to do this, not the accepted way since this is much simpler.

$('YOURID/CLASS').spinner({
    min: 1,
    max: 100,
    change: function (event, ui ) {
        $(this).spinner('value', parseInt($(this).spinner('value'),10) || 1);
    }
});

Any input that is not a number will be replaced by the number 1. You could also replace the || 1 with an alert box to alert the user that the number they input into the box is not valid.

You should also use a javascript validator to check the number upon form submission, and another one server side when reading the input in.

score 0 · Answer 4 · answered Sep 08 '14 at 17:13

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.

jQuery Spinner: Non-numerical values

4 Answers4

Linked