Increment Inputs with the Mousewheel

In the past we’ve covered adding +/- buttons to number-based inputs to help user interface (it’s easier than typing in some circumstances). Reader Hitesh N Chavda emailed me with the idea of doing it with the scroll of the mouse wheel instead.

With the mouse cursor inside the input box, you can use the mouse scroll wheel to increment the number up and down.

Hitesh worked up a technique for doing it using jQuery, which works great. Then later he found a plugin which has already been built for dealing with mousewheel events, which is really nice and simplifies things. Just for fun the demo will leave both versions in it.

HTML

This could literally work on any element, but text inputs make the most sense. Perhaps this could be used on a time-tracking form where you need to need to enter the number of hours/minutes spent on something. Or perhaps an order form for entering how many of something to order.

In our demo we’ll just have a label input pair like you’d find in just about any <form>:

<div>
    <label for="how-many">How Many? </label>
    <input type="text" id="how-many" class="wheelable" value="1" name="how-many" />
</div>

jQuery

If you want to check out the non-plugin version of this, just download the files below. We’ll cover using the plugin here, for brevity. You’ll need to include jQuery, the plugin, and your own JavaScript file:

<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="js/increment.js"></script>

When the DOM is ready, we’ll bind the new “mousewheel” event to the input. When that input fires, if it’s an “up” mousewheel scroll, we’ll increment the value upwards one, if “down”, it will be decremented by one (unless it’s already zero).

The appending of the image on the first line is so that non JavaScript users won’t see the graphic which indicates mousewheel scrollability.

$(function() {

    $("div").append('<img src="images/mousewheelupdown.png" alt="Scroll up or down with mousewheel" />');

    $("#how-many").bind("mousewheel", function(event, delta) {
        if (delta > 0) {
            this.value = parseInt(this.value) + 1;
        } else {
            if (parseInt(this.value) > 0) {
                this.value = parseInt(this.value) - 1;
            }
        }
        return false;
     });

});

What about non-numeric inputs?

You’ll have to deal with that as needed. Now that you have the “mousewheel” event that the plugin provides, the function you write when that event fires could be anything. In the demo I have a text input which cycles through a list of different kinds of whales…

$("#whale").bind("mousewheel", function(event, delta) {
    if (this.value == "Blue") {
        this.value = "Sperm";
    }
    else if (this.value == "Sperm") {
        this.value = "Orca";
    }
    else if (this.value == "Orca") {
        this.value = "Humpback";
    }
    else if (this.value == "Humpback") {
        this.value = "Blue";
    }
    return false;
 });

Killer whales are getting all the press lately, time for some Humpback love.

Degradation

This is pure progressive enhancement. Without JavaScript the inputs are still inputs which behave just as any other input would.

Enjoy

View Demo   Download Files