input type="number" 鼠标滚轮不滚动

Question

我很困惑为什么鼠标滚轮不会 increment/decrement 简单表单元素中的值。

<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/browser 问题吗？

我几乎觉得这可能是更深层次的问题，可能是 mouse/driver 问题的类型？

我测试的内容：

赢 7
Chrome - 失败
Firefox - 失败
Firefox 开发版 - 失败
Safari - 通过
IE11 - 失败
IE9 - 失败
OSX
Chrome - 失败
Safari - 失败
Firefox - 失败

Answer 1

所以我想我明白了。

首先我把你的代码复制到一个html文档中，然后在Chrome中打开，增量没有生效。其次，我从代码中删除了除输入框之外的所有内容，仍然没有用。

然后我使用 chrome 检查器将该代码注入随机网站，我在 gmail、reddit 和我自己的网站上进行了尝试。 Gmail 可以用，reddit 可以用，但我自己的网站不能用。

然后我禁用了 javascript，它在任何地方都不起作用。

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

Answer 2

代码段在 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" 鼠标滚轮不滚动

input type="number" mouse wheel does not scroll

html

input