Inspired by this article on css-tricks.com, I decided to release a plugin dedicated solely to quick keyboard-based manipulation of numeric values in HTML input fields. It’s called Increment.
See the Demo
Simply assign the set of inputs you wish to attach this behavior to:
$('input.hours').increment();
And let your fingers do the walking: use the up arrow to increment values, down arrow to decrement. Hold down shift for greater increments (maxIncrement), Ctrl/Cmd for smaller ones (minIncrement).
Define custom options for Increment easily:
$('input.hours').increment({ increment: 10 });
See plugin script comments for full list of options.
Use Cases: Time sheet applications (how I came to develop this), Order / Requisition forms, anywhere multiple numeric form inputs are needed.
Initial release v0.5 — tested on:
- Firefox 3.6 / Win
- Chrome 4.0 / Win
- IE 8 / Win
- Safari 4 / Mac
- Firefox 3.6 / Mac
- Chrome 5 Beta / Mac
Thanks to Chris Coyier (@chriscoyier) for the inspiration, and to Karl Swedberg (@kswedberg) for the still-solid jQuery plugin architecture guide.
Your feedback is appreciated. Let me know what you think in the comments below.
Follow me on Twitter: @seanodotcom

