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

【问题标题】：input type="number" mouse wheel does not scrollinput type="number" 鼠标滚轮不滚动
【发布时间】：2015-06-16 17:07:17
【问题描述】：

我很困惑为什么鼠标滚轮不会增加/减少简单表单元素中的值。

&lt;input type="number" step="0.125" min="0" max="0.875"&gt;

它在这个 sn-p 上工作得很好，但当我创建一个简单的通用 html 文档时却不行：

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

当我在多个浏览器中查看此内容时，鼠标滚轮不滚动。我也禁用了浏览器扩展等。我周围的其他几台机器也有同样的行为。

是什么原因导致这不起作用？这是操作系统/浏览器问题吗？

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

我测试过的内容：

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

【问题讨论】：

值得指出的是，即使在今天，并非所有浏览器都支持新的 HTML5 输入类型。
这可能值得指出，但它在此页面上有效，并且适用于我在网络上看到的各种通用示例。
看看这个，可能会有帮助：caniuse.com/#search=number
非常了解 caniuse，此外，它对我尝试过的几种浏览器都列为“支持”。
我可以重现这个。很好奇根本问题是什么。

标签： html input

【解决方案1】：

所以我想我想通了。

首先我将您的代码复制到一个 html 文档中并在 Chrome 中打开它，但增量不起作用。其次我从代码中删除了除了输入框之外的所有内容，仍然没有工作。

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

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

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

【讨论】：

这可能完全正确，但它应该仍然可以在 Chrome 中没有 javascript 的情况下工作，因为它是本机行为。

【解决方案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

【讨论】：

我想你可能错过了什么——什么浏览器/操作系统？它对我不起作用。
@pspahn Chrome on Windows（唯一一个数字字段对我有效的浏览器）。我可以使用箭头按钮更改两个页面中的数字，但鼠标滚动按钮仅适用于 iframed 页面。
嗯，即使在 chrome 中也无法正常工作。向上/向下箭头有效，鼠标点击有效，但没有鼠标滚轮。
我试过了。有用。现在我更加困惑了。很好的发现！
@YuriyGalanter 啊哈！现在可以在 chrome 中滚动内容。很好的发现。

【解决方案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 事件也可以在鼠标悬停在输入上时触发，而不仅仅是在选中时。

【讨论】：