Incrementable length values in text fields

Posted on by Lea Verou

I always loved that Firebug and Dragonfly feature that allows you to increment or decrement a <length> value by pressing the up and down keyboard arrows when the caret is over it. I wished my Front Trends slides supported it in the editable examples, it would make presenting so much easier. So, I decided to implement the functionality, to use it in my next talk.

If you still have no idea what I’m talking about, you can see a demo here:
View demo

You may configure it so that it only does that when modifiers (alt, ctrl and/or shift) are used by providing a second argument to the constructor and/or change the units supported by filling in the third argument. However, bear in mind that holding down the Shift key will make it increment by ±10 instead of ±1 and that’s not configurable (it would add too much unneeded complexity, I’m not even sure whether it’s a good idea to make the other thing configurable either).

You may download it or fork it from it’s Github repo.

And if you feel creative, you may improve it by fixing an Opera bug I gave up on: When the down arrow is pressed, the caret moves to the end of the string, despite the code telling it not to.

  • GMO

    On Firefox Minefield
    Incrementable is not defined
    [Break On This Error] new Incrementable(document.getElementsByTagName(‘textarea’)[0]);

    On Chrome Beta Channel it’s ok.

    But if you place the cursor on anything other than a number the cursor will not move between rows on a up or down arrow key press.

    I can’t wait to see the demonstration slide with this implemented ;) .

    As usual a good source of inspiration. Congratulations.

  • http://leaverou.me Lea Verou

    There is no such bug on Minefield. For some reason it doesn’t load the script file at all in yours, so the inline script fails.

    I just fixed the other usability problem, thanks :)

  • http://gmoulin.myopenid.com/ GMO

    Just tested with addons disabled and Minefield behave ;) .
    I also confirm the fix.

  • http://www.maxdesign.com.au/2011/03/07/some-links-318/ Some links for light reading (7/3/11) | Max Design

    [...] Incrementable length values in text fields [...]

  • http://www.facebook.com/thebigreason Mark Eagleton

    How about incrementing by 10 when holding down the shift key like webkit’s web inspector does?

  • http://leaverou.me Lea Verou

    Great idea! I’ll do it when I find some time :)

  • http://leaverou.me Lea Verou

    Done!

  • http://twitter.com/seanodotcom Sean O

    Works as advertised, nice!

    For those looking to increment just a numeric text field (say, for hours or quantities), using the keyboard or mouse, have a look at my jQuery plugin called… Increment :)

    http://sean-o.com/increment

  • Stefan Staynov

    Add support for non-decimal numbers… :P

  • http://redbey.com/?p=290 Powerful New CSS Techniques and Tools | redbey

    [...] Incrementable Length Values in Text FieldsLea Verou elaborates on the length value that works by pressing the up and down keyboard arrows when the caret is over it. [...]

  • http://www.ewok.fr/blog/?p=432 Powerful New CSS Techniques and Tools « e-wok.fr, le blog

    [...] Incrementable Length Values in Text FieldsLea Verou elaborates on the length value that works by pressing the up and down keyboard arrows when the caret is over it. [...]

  • http://www.buildin9.com/?p=285 Powerful New CSS Techniques and Tools

    [...] Incrementable Length Values in Text Fields Lea Verou elaborates on the <length> value that works by pressing the up and down keyboard arrows when the caret is over it. [...]

  • http://wpremake.com/powerful-new-css-techniques-and-tools/ Powerful New CSS Techniques and Tools | Remake Wordpress Theme

    [...] Incrementable Length Values in Text FieldsLea Verou elaborates on the <length> value that works by pressing the up and down keyboard arrows when the caret is over it. [...]

  • http://qeqnes.wordpress.com/2011/04/27/powerful-new-css-techniques-and-tools/ Powerful New CSS Techniques and Tools « qeqnes | Designing. jQuery, Ajax, PHP, MySQL and Templates

    [...] Incrementable Length Values in Text Fields Lea Verou explains how to implement a feature that allows you to increment or decrement a <length> value by pressing the up and down keyboard arrows when the caret is over it. [...]

  • http://www.cricketkafunda.com/2011/04/28/powerful-new-css-techniques-and-tools/ Powerful New CSS Techniques and Tools | CRICKET ka FUNDA

    [...] Incrementable Length Values in Text FieldsLea Verou explains how to implement a feature that allows you to increment or decrement a <length> value by pressing the up and down keyboard arrows when the caret is over it. [...]

  • http://sejix.com/blog/design/powerful-new-css-techniques-and-tools/ Powerful New CSS Techniques and Tools | Sejix Technologies Blog

    [...] Incrementable Length Values in Text Fields Lea Verou explains how to implement a feature that allows you to increment or decrement a <length> value by pressing the up and down keyboard arrows when the caret is over it. [...]

  • http://www.inspiretechs.com/blog/?p=312 Powerful New CSS Techniques and Tools | Inspire Technologies

    [...] Incrementable Length Values in Text Fields Lea Verou explains how to implement a feature that allows you to increment or decrement a <length> value by pressing the up and down keyboard arrows when the caret is over it. [...]

  • http://www.wdesignlove.com/coding/new-css-techniques-and-tools/ New CSS Techniques and Tools | W Design Love | Graphic and Web Design Blog | Coding | tutorials | freebies | Wordpress | inspiration | Blog

    [...] Incrementable Length Values in Text Fields Lea Verou explains how to implement a feature that allows you to increment or decrement a <length> value by pressing the up and down keyboard arrows when the caret is over it. [...]