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

19 Feb

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 ($) {
3:     $.fn.numeric = function (options) {
5:         return this.each(function () {
6:             var  $this = $(this);
8:             $this.keypress(options, function (e) {
9:                 // allow backspace and delete 
10:                 if  (e.which == 8 || e.which == 0)
11:                     return  true;
13:                 //if the letter is not digit 
14:                 if  (e.which < 48 || e.which > 57)
15:                     return  false;
17:                 // check max range 
18:                 var dest = e.which - 48;
19:                 var result = this.value + dest.toString();
20:                 if  (result > {
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.

Leave a comment

Posted by on 19/02/2011 in Software Development


Tags: , , , , , , ,

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: