Mar
04

jQuery Plugin – Increment

Posted (seano) in Internet, WebDev, jquery on March-4-2010
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


Comments:
Smasty on March 4th, 2010 at 2:01 pm #

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

seano on March 4th, 2010 at 2:14 pm #

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

Daniel on March 5th, 2010 at 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.

Jack on March 5th, 2010 at 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?

Steve on April 21st, 2010 at 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.

seano on April 21st, 2010 at 9:42 am #

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

seano on April 29th, 2010 at 10:46 am #

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

[...] See the original Increment blog post. [...]

jQuery Plugin - Increment - Robert Bojor on May 17th, 2010 at 11:37 am #

[...] out the plug-in on its web site at sean-o.com. Tags: jQuery, keyboard, mouse, [...]

Post a comment
Name: 
Email: 
URL: 
Comments: