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>

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;
    }
  ...
}

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;
}