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:
- javascript numeric stepper
- html numeric stepper
- 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.