Building an Unobtrusive, Accessible and Standards Compliant Numeric Stepper

First off, if you’re looking for a quick solution feel free to skip directly to the download link at the end of this article. For those who are interested in the intricate details please read on…

What is a Numeric Stepper?

Well, the answer is simple. It’s a form control and looks like this…

A Numeric Stepper

It has an intuitive look that does not require much brain power to figure out how to use. The name itself suggests it’s restricted to numeric values. The plus and minus signs indicate an ability to step up or down. The steps must be of equal size maintaining consistency. The great thing about Numeric Steppers is users can either enter a value or use the plus and minus buttons to arrive at a target value.

Flash UI developers have long since enjoyed this form control. In fact, it wasn’t until Flash came out with their UI components before I even heard of a Numeric Stepper!

What is it used for?

Numeric Steppers are not always useful. They are designed to solve a specific UI problem. Scenarios where Numeric Steppers would be of use are:

  • In shopping baskets; so users can quickly change quantities.
  • When choosing number of years experience in a skill or profession. Some forms may contain many such questions so Numeric Steppers will facilitate quick mouse action.
  • When choosing number of children or family members. There is no logical upper limit to this question so a drop down is out of the question. A simple input box will serve well but means the user will have to leave their mouse; find the correct keyboard key; then enter a value. With a Numeric Stepper they’d simply click the mouse button a few times in succession to obtain their target value.

These are just but a handful of scenarios. I’m sure there are much more good usage examples out there.

Pity they didn’t think of it earlier?

There is no equivalent HTML form control for the Numeric Stepper. I guess when forms were conceived there was no urgent need for them or the concept just didn’t exist back then. The rise of Ajax and rich UI interfaces have boosted the industry’s appetite for greater interactivity in forms. The chances of a Numeric Stepper playing more useful roles in forms is much greater now.

With that thought in mind we start our journey on building our own…

Building the Numeric Stepper

With help from JavaScript and a few basic form controls we can easily create our very own Numeric Stepper. The ingredients are: a standard text input, two buttons, a container to wrap it all up; and JavaScript to handle the associated events.

The HTML

<span class="numeric-stepper">
<input name="ns_textbox" size="2" type="text" />
  <button type="submit" name="ns_button_1" value="1" class="plus">+</button>
  <button type="submit" name="ns_button_2" value="-1" class="minus">-</button>
</span>

Example 1: The HTML structure

You may notice submit buttons are used rather than “button” buttons. This is so if JavaScript is not available the Numeric Stepper will degrade gracefully. Clicking on the buttons will cause a form submit hence allowing developers to take event handling to the backend. I won’t go into details of how to do the backend as it’s out of the scope of this article.

I must stress that form submit on button click is NOT what we are after for JavaScript enabled browsers. Using unobtrusive Javascript we want to increment/decrement the input box value by a step size on button click. We also want the JavaScript to restrict it to numerical values only; and apply an upper and lower limit. The code is too much to present here so I’m only going to show the important parts:

The JavaScript

var NumericStepper = {
  register : function(name, minValue, maxValue, stepSize){
    ...
    textbox.onkeypress = function(e){
      if(window.event){
        keynum = e.keyCode;
      } else if(e.which){
        keynum = e.which;
      }
      keychar = String.fromCharCode(keynum);
      numcheck = /[0-9-]/;
      if (keynum==8)
        return true;
      else
        return numcheck.test(keychar);
    };
    ...
  }
  ...
  ,stepper:function(textbox, val){
    if (textbox == undefined)
      return false;
    if (val == undefined || isNaN(val))
      val = 1;
      if (textbox.value == undefined || textbox.value == '' || isNaN(textbox.value))
        textbox.value = 0;
      textbox.value = parseInt(textbox.value) + parseInt(val);
      if (parseInt(textbox.value) < NumericStepper.minValue)
        textbox.value = NumericStepper.minValue;
      if (parseInt(textbox.value) > NumericStepper. maxValue)
        textbox.value = NumericStepper.maxValue;
    }
  ...
}

Example 2: Numeric Stepper; no clothes

Our Numeric Stepper is nearly complete. It doesn’t look much like one at the moment; but with a little help from CSS we can give our Numeric Stepper some clothes.

The CSS

.numeric-stepper {
  width:3.425em;
  height:1.6em;
  display:block;
  position:relative;
  overflow:hidden;
  border:1px solid #555;
}

.numeric-stepper input {
  width:75%;
  height:100%;
  float:left;
  text-align:center;
  vertical-align:center;
  font-size:125%;
  border:none;
  background:none;
}

.numeric-stepper button {
  width:25%;
  height:50%;
  font-size:0.5em;
  padding:0;
  margin:0;
  z-index:100;
  text-align:center;
  position:absolute;
  right:0;
}
.numeric-stepper button.minus {
  bottom:0;
}

The final product: Unobtrusive, Accessible and Standards compliant.

The idea of clothes/skins is fascinating for our Numeric Stepper as it allows us to change its look and feel with some CSS trickery. Take a look at this graphical example.

The Source Code

You can get hold of version 0.1 of the Numeric Stepper source code by following this download link.

I have tested it on FF2, Opera 8.5, IE5.5, IE6, IE7 and Safari. Works well but the buttons look a little weird in Safari though still usable.

Bugfixes, code enhancements, feature requests & improvements are welcome. Please do let me know if you use this code though and if you find it at all useful!

Update: version 0.1.2 adds some accessibility enhancements.

  • http://fotoyuz.biz cem kosali

    Thx fot this usefull code but I couldnt make it work in any of my forms. I couldn't understand why minus and plus buttons are still submitting.

    is there anything wrong in my coding._?

    " type="text" class="numeric-stepper" id="mtm_adet_" value="" size="2" maxlength="3" />

    +

    -

  • caphun

    @cem, I can't see what your code is doing as the copy 'n' paste messed it up. Do you have an example somewhere online?

  • ReaderX

    Thank you

  • http://metallicafanatic.blogcu.com chester..

    css textboxt ?nput (textfield) style – examples – -
    http://www.css-lessons.ucoz.com/textbox-css-examp

  • Pingback: jQuery Numeric Stepper | Yelotofu

  • http://TBA JC Lew

    Ung, I read your code and found that it's very useful. The stepper worked when I incorporated these codes into my developing webpages. Thank you so much for your help.

  • http://www.metin2.mobi metin2 yang

    it is very nic

  • http://www.linksoflondonstore.com links of london

    it is very nic

  • rory

    Hi I have been using this script for a while and I have just noticed that if you click the plus/minus buttons before the page has finished loading it will submit the form immediately – am I doing something wrong here? is there a way to disable the buttons until the page has loaded? can I create the buttons as type=button and disable non js functionality?

    any help appreciated. thanks.

    • caphun

      @rory: this is because the script is only initialised on winow.load – see last line of ns.js

      To overcome this particular problem you should change the code to load on DomReady. You will need this:
      http://code.google.com/p/domready/

  • http://cuticlenipper.blogspot.com cuticle care

    This is a great find, gotta love javascript.