jQuery Increment Plugin

The latest version of the jQuery Increment plugin (v. 0.6) now supports use of the mousewheel plugin by Brandon Aaron to increment/decrement numeric input values. Ensure scripts are loaded in the proper order (jquery » mousewheel » increment).

Try it out: jQuery Increment Demo

Download Increment Now

See the original Increment blog post.

jQuery Increment Plugin

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

Check out this list of free icon resources. Find just about any icon for your web site / web application. And yes, of course it includes the legendary FamFamFam sets.