如何仅对获焦的数字类型输入框启用滚轮驱动的数值变更功能？

我已有可运行的脚本，但不知道如何使用addEventListener替代onfocus与onmousewheel，也不清楚如何将该功能应用到多个元素上。

原代码示例：

const input = document.getElementsByClassName("change-onscroll")[0];
input.value = input.min ? input.min : 0;
input.onfocus = () => {
    input.onmousewheel = (e) => {
        if (deltaY > 0 && +input.value <= +input.min) return;
        e.deltaY < 0 ? input.value++ : input.value--;
    };
};

<input type="number" name="num" class="change-onscroll" min="0" />

核心修改要点 #

• 用addEventListener替代onxxx属性，支持绑定多个同类型事件，也能灵活移除监听
• 遍历所有目标元素，给每个元素独立绑定事件逻辑
• 修复原代码中deltaY未取事件对象属性的问题，补充max值边界判断
• 输入框失焦时移除滚轮事件，避免无关场景下误触发

完整实现代码 #

HTML（多输入框示例）

<input type="number" name="num1" class="change-onscroll" min="0" max="10" />
<input type="number" name="num2" class="change-onscroll" min="5" max="20" />
<input type="number" name="num3" class="change-onscroll" min="-10" max="10" />

JavaScript

// 获取所有带目标类名的输入框
const inputs = document.querySelectorAll(".change-onscroll");

// 遍历每个输入框初始化并绑定事件
inputs.forEach(input => {
    // 初始化输入框值为min设定值或0
    input.value = input.min ? input.min : 0;

    // 抽离滚轮事件处理函数，方便后续移除监听
    const handleWheel = (e) => {
        e.preventDefault(); // 阻止页面滚动干扰输入框操作
        const currentVal = Number(input.value);
        const minVal = Number(input.min) || -Infinity;
        const maxVal = Number(input.max) || Infinity;

        // 根据滚轮方向调整值，同时限制在min/max范围内
        let newVal = currentVal;
        if (e.deltaY < 0) {
            newVal = Math.min(currentVal + 1, maxVal);
        } else {
            newVal = Math.max(currentVal - 1, minVal);
        }
        input.value = newVal;
    };

    // 聚焦时绑定滚轮事件
    input.addEventListener("focus", () => {
        input.addEventListener("wheel", handleWheel);
    });

    // 失焦时移除滚轮事件监听
    input.addEventListener("blur", () => {
        input.removeEventListener("wheel", handleWheel);
    });
});

关键说明 #

• 用querySelectorAll替代getElementsByClassName，返回静态NodeList，遍历更稳定
• 滚轮处理函数独立定义，确保removeEventListener能精准移除对应监听
• 添加e.preventDefault()避免滚轮操作同时触发页面滚动，优化交互体验
• 兼容未设置min/max的场景，默认用正负无穷作为边界值
• 每个输入框的事件逻辑完全独立，不会互相干扰

内容的提问来源于stack exchange，提问作者redboo