Question

我很难过为什么鼠标滚轮不会在简单的表单元素中递增/递减值。

<input type="number" step="0.125" min="0" max="0.875">

它适用于此代码段，但是当我创建一个简单的通用html文档时却不行：

<!DOCTYPE html>
<html>
<head></head>
<body>
    <form action="">
        <input type="number" step="0.125" min="0" max="0.875">
    </form>
</body>
</html>

当我在多个浏览器中查看时，鼠标滚轮不会滚动。我已禁用浏览器扩展程序等。我周围的其他几台机器的行为方式相同。

是什么导致这不起作用？这是OS /浏览器问题吗？

我几乎觉得这可能是更深层次的东西，可能是鼠标/驱动程序问题的类型？

我测试的内容：

赢7
Chrome - 失败
Firefox - 失败
Firefox开发版 - 失败
Safari - 传递
IE11 - 失败
IE9 - 失败
OSX
Chrome - 失败
Safari - 失败
Firefox - 失败

Answer 1

所以我想我想通了。

首先，我将您的代码复制到html文档中并在Chrome中打开，并且增量无效。其次，除了输入框之外，我从代码中删除了所有内容，但仍然无法正常工作。

然后我使用chrome检查器将该代码注入随机网站，我在gmail，reddit和我自己的网站上尝试过。 Gmail工作，reddit工作，但我自己的网站没有工作。

然后我禁用了javascript，它在任何地方都无法运行。

所以为了回答你的问题，stackoverflow /许多其他网站使用javascript自动将该功能添加到数字输入。

Answer 2

Snippet在IFRAME中运行。将您的代码放入IFRAME中它也会起作用。为什么 - 我不知道但它有效。

即

http://codecorner.galanter.net/bla2.htm - 不起作用（代码本身） http://codecorner.galanter.net/bla.htm - 作品 - IFRAME中的上一页

编辑：以下是Chrome 41中的演示：http://codecorner.galanter.net/bla_mousescroll.mp4

编辑2：我想我弄明白了，而且它不是IFRAME。为了使滚动事件发生 - 实际内容必须是可滚动的。例如，如果你像这样重做你的例子：

<!DOCTYPE html>
<html>
<head></head>
<body>
    <form action="" style="width:200px;overflow:scroll">
    <div style="width:300px">
            <input type="number" step="0.125" min="0" max="0.875">
    </div>
    </form>
</body>
</html>

其中容器形式小于其内容 - DIV - 滚轮适用于数字字段：http://codecorner.galanter.net/bla3.htm

Answer 3

要完全避免浏览器问题，您可以尝试使用jQuery mousewheel插件手动更改输入值。例如：

<强>的index.html

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script type="text/javascript" src="jquery.mousewheel.js"></script>
    <script type="text/javascript" src="scroll.js"></script>
</head>
<body>
    <form action="">
        <input id="myInput" type="number" step="0.125" min="0" max="0.875">
    </form>
</body>
</html>

<强> scroll.js

$(function() {
    $('#myInput').on("mousewheel", function(event) {
        event.preventDefault();
        $this = $(this);
        $inc = parseFloat($this.attr('step'));
        $max = parseFloat($this.attr('max'));
        $min = parseFloat($this.attr('min'));
        $currVal = parseFloat($this.val());

        // If blank, assume value of 0
        if (isNaN($currVal)) {
            $currVal = 0.0;
        }

        // Increment or decrement numeric based on scroll distance
        if (event.deltaFactor * event.deltaY > 0) {
            if ($currVal + $inc <= $max) {
                $this.val($currVal + $inc);
            }
        } else {
            if ($currVal - $inc >= $min) {
                $this.val($currVal - $inc);
            }
        }
    });
});

适用于Chrome和Firefox。当鼠标悬停在输入上时，可以触发mousewheel事件，而不仅仅是在选择它时。

input type =“number”鼠标滚轮不滚动

3 个答案: