Input érték növelése egér görgővel

jQuery segítségével lehetővé tesszük, hogy egy input mezőben található értéket az egér görgőjével tudjunk növelni illetve csökkenteni.

HMTL

A legjobban olyan esetekben tudjuk kihasználni ezt a funkciót, mint például a webshopok mennyiség választó inputja, vagy idő bevitelénél pörgethetjük fel/le a perceket. A példában csak egy label és input mező szerepel.

1
2
3
4

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

jQuery

Egy előre elkészített plugint fogunk hozzá használni, feleslegesen nem kell feltalálni a spanyol viaszt .

<script type='text/javascript' src='http://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>

Amint a DOM teljesen betöltődött, hozzákötjük a “mousewheel” eseményt az inputhoz. Értelem szerűen ha a görgő felfelé mozdul el akkor növelni, ha lefelé akkor csökkenteni fogjuk az értéket, ügyelve arra, hogy ha az érték már 0, ne csökkentsük tovább.

A képet azért js-ben fűzzük hozzá az oldalhoz, hogy a js-et nem használó felhasználók ne lássák a görgetés lehetőségét.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

$(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;
     });
 
});

Mi a helyzet a nem numerikus értékekkel?

Ezt is le tudod kezelni ha szükséged van rá. Ha már megvan a “mousewheel” esemény amit a plugin szolgáltat, a függvény ami az esemény kezelésekor lefut, akármi lehet. A példában egy beviteli mező van ami megadott string értékeket vehet fel…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

$("#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;
 });

Összegzés

Ez egy szép megoldás, mivel JavaScript nélkül a beviteli mezők sima mezei inputként működnek, és semmilyen hibát nem dob a rendszer. Amennyiben pedig működik, kellemes felhasználói élményt nyújthat.

Demo

Kapcsolódó cikkek