jQuery Plugin – Increment

jQuery Increment Plugin
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

Join the Conversation

10 Comments

  1. 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.

  2. 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?

  3. Would be cool to attach this to the mouse-wheel as well as cursor keys. Gives the user another way of changing the value.

  4. @Steve: Absolutely. This functionality is already in the current working version, and I hope to release it soon.

  5. Thanks for the plugin, it’s great. However, it doesn’t work with the latest version of jquery 🙁

Leave a comment

Leave a Reply to Jack Cancel reply

Your email address will not be published. Required fields are marked *