我正在尝试使用鼠标滚轮增加/减少输入框的值。我已经编写了以下代码,它可以正常工作,但存在一个小问题。
我希望的行为是,一旦我聚焦到该元素上,就能够使用鼠标滚轮递增/递减输入值。鼠标不必悬停在该元素上。以下代码可以实现这一点。但如果我在悬停在输入元素上时使用滚轮,则值会递增/递减2而不是1。
经过一些试验,我发现上下箭头键有相似的行为。 在数字输入上,上下箭头键会增加/减少值。 我想,这种行为与我的代码冲突。 这导致它增加了2,即使代码没有执行两次。
我刚意识到这可能是Chrome特有的问题。如果您聚焦并悬停在元素上,Chrome允许您使用鼠标滚轮增加/减少数字输入值。然而,它的工作方式非常奇怪。
如果我只在一个空HTML页面中添加
回到实际问题,我能否禁用元素上的默认鼠标滚轮增量,以便我可以使用自定义增量?或者是否有其他方法可以使用?
我希望的行为是,一旦我聚焦到该元素上,就能够使用鼠标滚轮递增/递减输入值。鼠标不必悬停在该元素上。以下代码可以实现这一点。但如果我在悬停在输入元素上时使用滚轮,则值会递增/递减2而不是1。
var hoveredInput = null;
$('input[type="number"]').on("focus", function(e) {
hoveredInput = this;
});
$('input[type="number"]').on("blur", function(e) {
hoveredInput = null;
});
$(window).on("wheel", function(e) {
if (hoveredInput) {
if (e.originalEvent.deltaY < 0) {
var currentValue = parseInt(hoveredInput.value, 10);
var newValue = currentValue + 1;
if (newValue > parseInt(hoveredInput.max, 10)) {
newValue = hoveredInput.max;
}
hoveredInput.value = newValue;
} else {
var currentValue = parseInt(hoveredInput.value, 10);
var newValue = currentValue - 1;
if (newValue < parseInt(hoveredInput.min, 10)) {
newValue = hoveredInput.min;
}
hoveredInput.value = newValue;
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" value="0" min="0" max="255" />
我刚意识到这可能是Chrome特有的问题。如果您聚焦并悬停在元素上,Chrome允许您使用鼠标滚轮增加/减少数字输入值。然而,它的工作方式非常奇怪。
如果我只在一个空HTML页面中添加
<input type="number" />
,则此鼠标滚轮增量不起作用。要使其起作用,我只需添加window.onwheel = function() {};
。这毫无意义。此外,在JSFiddle和JSBin上似乎可以正常工作,而不需要在window
上分配onwheel
。
回到实际问题,我能否禁用元素上的默认鼠标滚轮增量,以便我可以使用自定义增量?或者是否有其他方法可以使用?
preventDefault()
。而且我也不知道document.activeElement
。我还有另一个监听器来处理输入的最小值和最大值限制。只是因为它与手头的问题没有真正关系,所以我不想包含它。 - akinuri