如何使现有的鼠标滚轮驱动的值更改只集中在数字类型的输入元素?

Question

我有一个工作脚本，但我不知道如何使用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" />

Answer 1

如果OP想为聚焦的输入元素启用滚动行为，则OP需要显式地注册这样的处理任何这样的元素的'focus'或'focusin'事件和注销再次处理任何此类元素的'blur'或'focusout'事件

function handleNumberTypeMouseScroll(evt) {
const { currentTarget: input, deltaY } = evt;
const minValue = parseInt(input.min, 10);

if (deltaY > 0 && input.value <= minValue) return;
deltaY < 0 ? input.value++ : input.value--;
}
function deregisterMousewheelHandling({ currentTarget }) {
currentTarget
.removeEventListener('mousewheel', handleNumberTypeMouseScroll);
}
function registerMousewheelHandling({ currentTarget }) {
currentTarget
.addEventListener('mousewheel', handleNumberTypeMouseScroll);
}
document
.querySelectorAll('.change-on-focused-scroll')
.forEach(elmNode => {
elmNode.addEventListener('blur', deregisterMousewheelHandling);
elmNode.addEventListener('focus', registerMousewheelHandling);
});

<input type="number" name="num" class="change-on-focused-scroll" min="0" value="0" />
<input type="number" name="num" class="change-on-focused-scroll" min="5" value="5" />
<input type="number" name="num" class="change-on-focused-scroll" min="20" value="20" />