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.
v0.6 — Added support for mousewheel plugin, small Closure Compiler bugfix
v0.5 — Initial release
Increment has been tested on:
- Firefox 3.6 / Win
- Chrome 4.0 / Win
- IE 8 / Win
- Safari 4 / Mac
- Firefox 3.6 / Mac
- Chrome 5 Beta / Mac
Download Increment Now
New v0.6 with mousewheel plugin support
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
Not working well in Opera, because arrow down shows pre-defined formular data.
@Smasty: Have you tried adding “autocomplete=off” to the input?
Probably want to rename “char”, as minifying it with Google Closure Compiler will throw an error.
Also, tested in Opera 10.10, using shift or ctrl + arrow enables the opera feature to move from link to link.
Overall, thanks for the plugin.
Years ago, quicken used the plus and minus keys to increment and decrement dates in the date fields of it’s software. While these keys aren’t common on the mac due to the need to hold shift, they are common on all full size keyboards. Could you mod this code so that Plus and Minus work and so it works on date fields?
Would be cool to attach this to the mouse-wheel as well as cursor keys. Gives the user another way of changing the value.
@Steve: Absolutely. This functionality is already in the current working version, and I hope to release it soon.
v0.6 – now with support for the Mousewheel plugin.
Thanks for the plugin, it’s great. However, it doesn’t work with the latest version of jquery 🙁