jQuery numeric textbox with range (well, none or zero to max)

I’ve been looking for a jQuery plugin which will allow me to turn a textbox into a numeric, ranged textbox. After searching a little around the web, experimenting with some of the alternatives without satisfaction, I found some code samples which were partially adequate and I decided on writing specific code for my own purposes.

It’s designed for something quite specific, so it lacks many options which more “generic” plugins have, but it could be of use for developers who require a simple numeric textbox limited by a certain “max number”. There’s no min number involved, but basically you can’t enter characters other than numeric, so it’ll either accept empty, zero or a positive number up to the max specified.

This is my first jQuery plugin ever. My steps were basically:

1. Write jQuery-based code in my main document which performed what I wanted.
2. Look up at the documentation for authoring jQuery plugins, and then I copy-pasted one of the examples which I thought suitable.
3. Copy-pasted the code from step 1 onto the example’s template copied in step 2.
4. Test and debug.

Here it is:

1: (function ($) {

2:

3:     $.fn.numeric = function (options) {

4:

5:         return this.each(function () {

6:             var  $this = $(this);

7:

8:             $this.keypress(options, function (e) {

9:                 // allow backspace and delete 

10:                 if  (e.which == 8 || e.which == 0)

11:                     return  true;

12:

13:                 //if the letter is not digit 

14:                 if  (e.which < 48 || e.which > 57)

15:                     return  false;

16:

17:                 // check max range 

18:                 var dest = e.which - 48;

19:                 var result = this.value + dest.toString();

20:                 if  (result > e.data.max) {

21:                     return  false;

22:                 }

23:             });

24:         });

25:     };

26: })(jQuery);

 

1: $( '#myTextbox' ).numeric({max: 99999});

As I’m aware that this plugin lacks lots of functionality, and probably will have it’s own share of bugs, it’ll be great to receive recommendations for other plugins which support numeric and ranged input. I was hoping that jStepper would be my preferred solution as it seemed to have all that I wanted and more, but for some reason it ignores my option settings for not allowing decimals.

If you wish, you can download the code from here: jquery.numeric.js. Just make sure that you rename to js instead of doc.