我很困惑为什么鼠标滚轮不会增加/减少简单表单元素中的值。
<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>
当我在多个浏览器中查看此内容时，鼠标滚轮不滚动。我也禁用了浏览器扩展等。我周围的其他几台机器也有同样的行为。
是什么原因导致此功能不起作用？这是操作系统/浏览器问题吗？
我几乎觉得这可能是更深层次的问题，可能是鼠标/驱动程序问题的类型？
我测试过的内容：
IE9 - 失败
OSX
为了完全避免浏览器问题，您可以尝试使用 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代码片段在 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
所以我想我已经明白了。
首先我将你的代码复制到一个html文档中并在Chrome中打开它，增量不起作用。 其次，我删除了代码中除了输入框之外的所有内容，仍然不起作用。
然后我使用 chrome 检查器将该代码注入到随机网站中，我在 gmail、reddit 和我自己的网站上进行了尝试。 Gmail 可以用，reddit 可以用，但我自己的网站不能用。
然后我禁用了 javascript，它在任何地方都不起作用。
因此，为了回答你的问题，stackoverflow /许多其他网站使用 javascript 来自动将该功能添加到数字输入中。
您只需要在输入元素上声明一个“onmousewheel”事件。无需 JavaScript。
<label for="wheeltest">Value</label>
<input type="number" step="0.125" min="0" max="0.875" onmousewheel>我不想像 Elliots 帖子中那样使用 JQuery，并且在 google 上没有容易获得的 TS 实现，所以这就是我写的。
const onMouseWheel = <T extends Element & { value: string }>(
event: React.WheelEvent<T>
) => {
event.preventDefault();
const el = event.target as T;
const curVal = el.value === "" ? 0.0 : parseFloat(el.value);
if (event.deltaY === 0) return curVal;
const inc = parseFloat(el.getAttribute("step") || "1");
const max = parseFloat(el.getAttribute("max") || "9999");
const min = parseFloat(el.getAttribute("min") || "-9999");
const scrollAmount = -event.deltaY / 180;
const change = scrollAmount * inc;
const changedVal = curVal + change;
if (changedVal > max || changedVal < min) return curVal;
return changedVal;
};
export default onMouseWheel;
此代码侦听鼠标滚轮事件，防止默认行为并根据 的 step、min 和 max 属性手动计算新值。
要使用它，只需将事件处理程序添加到您的输入中，如下所示：
<input
type="number"
step="0.125"
min="0"
max="0.875"
onWheel={onMouseWheel}
/>