jQuery Plugin – Increment 10

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

10 thoughts on “jQuery Plugin – Increment

  1. Reply Smasty Mar 4, 2010 2:01 pm

    Not working well in Opera, because arrow down shows pre-defined formular data.

  2. Reply seano Mar 4, 2010 2:14 pm

    @Smasty: Have you tried adding “autocomplete=off” to the input?

  3. Reply Daniel Mar 5, 2010 10:51 am

    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.

  4. Reply Jack Mar 5, 2010 11:57 pm

    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?

  5. Reply Steve Apr 21, 2010 9:38 am

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

  6. Reply seano Apr 21, 2010 9:42 am

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

  7. Reply seano Apr 29, 2010 10:46 am

    v0.6 – now with support for the Mousewheel plugin.

  8. Pingback: Sean-O.com » Blog Archive » jQuery Increment Plugin – Now with Mousewheel Support

  9. Pingback: jQuery Plugin - Increment - Robert Bojor

  10. Reply Robert Sep 21, 2012 8:47 am

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

Leave a Reply