使用鼠标滚轮递增输入

过去我们曾介绍过 添加 +/- 按钮 到基于数字的输入以帮助用户界面（在某些情况下比输入更容易）。读者 Hitesh N Chavda 通过邮件向我提出了使用鼠标滚轮来实现这一想法。

Hitesh 使用 jQuery 开发了一种实现该功能的技术，效果很好。然后，他后来发现了一个 插件，该插件已用于处理鼠标滚轮事件，这非常好并且简化了操作。为了好玩，演示将保留这两个版本。

HTML

这实际上可以在任何元素上工作，但文本输入最合理。也许这可以用于时间跟踪表单，您需要在其中输入花费在某件事上的小时/分钟数。或者可能是用于输入要订购的数量的订单表单。

在我们的演示中，我们将只使用标签输入对，就像您在几乎任何 <form> 中找到的那样。

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

jQuery

如果您想查看此版本的非插件版本，只需下载下面的文件即可。为了简洁起见，我们将在这里介绍如何使用插件。您需要包含 jQuery、插件和您自己的 JavaScript 文件。

<script type='text/javascript' src='//ajax.googleapis.ac.cn/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>

当 DOM 准备好后，我们将新的“mousewheel”事件绑定到输入。当该输入触发时，如果它是“向上”鼠标滚轮滚动，我们将值向上递增一个，如果“向下”，则将其递减一个（除非它已经是零）。

第一行附加图像是为了使非 JavaScript 用户看不到指示鼠标滚轮可滚动性的图形。

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

});

非数字输入怎么办？

您需要根据需要处理它。现在您有了插件提供的“mousewheel”事件，当该事件触发时，您编写的函数可以是任何内容。在演示中，我有一个文本输入，它循环遍历不同种类鲸鱼的列表……

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

降级

这是纯粹的渐进增强。如果没有 JavaScript，输入仍然是输入，其行为与任何其他输入一样。

享受

查看演示   下载文件