Javascript 使用鼠标滚轮增加输入值

我正在尝试使用鼠标滚轮增加/减少输入字段的值。我已经整理了以下代码。工作正常，但有个小问题

我想要的行为是，一旦我关注元素，就能够使用鼠标滚轮增加/减少输入值。鼠标不必悬停在元素上。下面的代码执行此操作。但是，如果在悬停输入元素时使用wheel，则该值将增加/减少2，而不是1

var hoveredInput=null；
$（'input[type=“number”]”）。关于（“焦点”，函数（e）{
hoveredInput=这个；
});
$（'input[type=“number”]”）。在（“模糊”上，函数（e）{
hoveredInput=null；
});
$（窗口）。打开（“控制盘”，功能（e）{
如果（悬停输入）{
if（e.originalEvent.deltaY<0）{
var currentValue=parseInt（hoveredInput.value，10）；
var newValue=当前值+1；
if（newValue>parseInt（hoveredInput.max，10））{
newValue=hoveredInput.max；
}
hoveredInput.value=新值；
}否则{
var currentValue=parseInt（hoveredInput.value，10）；
var newValue=当前值-1；
if（newValue
我不知道您为什么会考虑不使用来阻止默认操作。您正在更改这些情况下的UI操作。当然，您应该使用
preventDefault（）
来阻止默认操作。如果不使用
preventDefault（）
，则在聚焦
时使用滚轮会产生一些意外的后果。如果没有
preventDefault（）
，在这些情况下会发生什么意外后果将取决于用于查看页面的浏览器

我无法复制与使用光标键更改输入值的冲突。显然，如果您用来限制
的最小值和最大值的全部是鼠标滚轮的代码，那么这些限制将不适用于任何其他输入方法。您可以使用
min
和
max
属性来限制值。出于多种原因，这样做会更好，包括它会影响所有输入值的方法，并且允许根据
定义这些范围，而不是为所有
定义一组限制。我已经更改了代码，以便您的代码也使用这些属性

如果您这样做，您可能需要考虑添加CSS样式来指示<代码> <代码>元素具有焦点。这样做可以让用户更清楚地了解为什么鼠标滚轮没有达到他们通常期望的浏览器用户界面效果
我建议你在多个浏览器上试试，看看这是否是你想要的。就我个人而言，至少在我在这一页所做的测试中，我喜欢这种行为

注意：

您对
focus
和
blur
事件的使用过于复杂。我已经更改了代码，以便使用直接查找聚焦元素


//排除一个特定元素，用于将此UI与浏览器的默认值进行比较。
var excludedEl=document.getElementById（'exclude'）；
$（窗口）。打开（“控制盘”，功能（e）{
focusedEl=document.activeElement；
if（focusedEl==excludedEl）{
//排除一个用于UI比较的特定元素
返回；
}
if（focusedEl.nodeName='input'&&focusedEl.type&&focusedEl.type.match（/number/i））{
e、 预防默认值（）；
var max=null；
var min=null；
if（focusedEl.hasAttribute（'max'））{
max=focusedEl.getAttribute（'max'）；
}
if（focusedEl.hasAttribute（'min'））{
min=focusedEl.getAttribute（'min'）；
}
var值=parseInt（focusedEl.value，10）；
if（e.originalEvent.deltaY<0）{
值++；
如果（最大！==null&&value>max）{
值=最大值；
}
}否则{
价值--；
if（min！==null&&value
input[type=“number”]：焦点{
盒影：0px 0px 1.5px 1px青色；
}
/*用于比较UI：可能与浏览器默认设置或用户主题冲突*/
#排除：焦点{
盒影：无；
}

注意：只有当鼠标停留在stackoverflow页面的测试部分时，才会捕获事件：




使用更改的UI（如果聚焦，鼠标滚轮将递增/递减）：


使用浏览器默认用户界面：
我没有想到
preventDefault（）
真是太傻了。我不知道
document.activeElement
。我还有另一个用于处理最小-最大限制的输入侦听器。我只是不想把它包括在内，因为它和手头的问题并没有真正的关系。