JS实现数字输入框禁止选择小于0的数值，将0设为输入最小值

需要实现数字输入框最小值限制为0，禁止出现小于0的负值，基于e.target.value相关逻辑完成校验，不破坏原有加减按钮、空值重置为0的功能。

原有逻辑存在的问题：点击减号按钮时没有做边界判断，当值为0时继续点击会出现-0.01这类负值；手动输入负值时也没有拦截修正。

HTML部分（新增原生min属性做基础兜底） #

<button class="input-btn" id="minus">−</button>
<button class="input-btn" id="plus">+</button>
<input class="input" type="number" value="0" id="amount" min="0"/>

JavaScript部分（补充两处负值校验逻辑） #

// 加减按钮逻辑
const minusButton = document.getElementById('minus');
const plusButton = document.getElementById('plus');
const inputField = document.getElementById('amount');

minusButton.addEventListener('click', event => {
    event.preventDefault();
    const currentValue = Number(inputField.value) || 0;
    const newValue = currentValue - 0.01;
    // 最小值兜底，小于0直接设为0
    inputField.value = newValue < 0 ? 0 : newValue;
});

plusButton.addEventListener('click', event => {
    event.preventDefault();
    const currentValue = Number(inputField.value) || 0;
    inputField.value = currentValue + 0.01;
});

// 输入框变更校验
const numInputs = document.querySelectorAll('input[type=number]')

numInputs.forEach(function(input) {
    input.addEventListener('change', function(e) {
        if (e.target.value == '') {
            e.target.value = 0
        }
        // 新增负值判断，不管是手动输入还是其他方式改值，小于0就重置为0
        const currentNum = Number(e.target.value);
        if (currentNum < 0) {
            e.target.value = 0;
        }
    })
})

如果需要用户输入时实时校验，不用等失焦触发change事件才修正，可以给输入框额外绑定input事件，复用同样的负值校验逻辑即可。

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