Unobtrusive, Accessible and Standards Compliant Numeric Stepper (revisited)

July last year I wrote a small tutorial on how to build an Unobrustive, Accessible and Standards Compliant Numeric Stepper. As of today it remains the most high traffic page on my site. I can see there is interest out there in a HTML and JavaScript based Numeric Stepper since the most searched for terms are:

  1. javascript numeric stepper
  2. html numeric stepper
  3. numericstepper javascript

So with some downtime on my hands I did some code refactoring and added a few Accessibility improvements: Now, when the Textbox has focus pressing the up or down arrow cursor keys will increment or decrement the numeric value respectively. Also with the cursor keys you can now navigate between the Textbox and plus and minus buttons without resorting to the Mouse pointer.

Test the new cursor key feature with this example

As an aside, the Dojo Toolkit has a Numeric Stepper as part of Dijit, the Dojo Widgit Library. They call it a NumericSpinner. It’s pretty powerful though looks bad with CSS switched off. Additionally, the Dojo Toolkit tends to add proprietary attributes to your HTML, hence breaking validation.

Get latest version (NumericStepper v0.1.2)

  • Fernando

    hi, i have a question, how i can set the maxValue?.. i have 15 Numeric Stepper in the same form, and i need set one by one the MaxValue.. thanks for you help

  • http://None Marc

    Hi, I have a problem. I have several inputs, each with different min and max values. How do I do it??? I need change diferent values for each input… Thanks!

  • http://www.mythictech.ca Mythic Tech

    Thanks for the info, found it very helpful

    Trevor Seabrook

    Mythic Tech – Toronto Web Design
    http://www.mythictech.ca

  • http://moreearn.com Nikart

    Hi,

    Good article and good discussion. Some basic stuff but it is always good to remember the basics once in a while.

    Most people make a first impression within five seconds time. If you don’t have a site that captures the initial interest, nothing else matters.

    Tutorial – create a website free