我想防止能够选择一个小于零的数字与e.target.value

Question

我想防止负值(<0)在输入字段上选择。被"0";可用于输入字段的最低值。

下面是javascript和html代码:

// Button functions
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;
inputField.value = currentValue - 0.01;
});
plusButton.addEventListener('click', event => {
event.preventDefault();
const currentValue = Number(inputField.value) || 0;
inputField.value = currentValue + 0.01;
});
// Returning 0 when clearing input
const numInputs = document.querySelectorAll('input[type=number]')
numInputs.forEach(function(input) {
input.addEventListener('change', function(e) {
if (e.target.value == '') {
e.target.value = 0
}
})
})

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

Answer 1

你的代码基本正确。

1. minusButton事件处理程序的逻辑,您可以执行值不会被设置为任何低于0。
2. 编辑输入事件处理程序以检查小于0的值，而不等于0。

注意:事件处理程序添加到输入火在"变化"只有当用户执行手动使改变输入框的值,而不是当它改变了代码(如你做通过minusButton和plusButton)。因为，用户点击按钮(不直接与输入交互)，事件发生在按钮上，而不是输入框上。

你可以试试下面的代码。

// Button functions
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;
// if less than 0, set to 0, else currentValue - 0.01
inputField.value = currentValue - 0.01 < 0 ? 0 : currentValue - 0.01;
});
plusButton.addEventListener("click", (event) => {
event.preventDefault();
const currentValue = Number(inputField.value) || 0;
inputField.value = currentValue + 0.01;
});
// Returning 0 when clearing input
const numInputs = document.querySelectorAll('input[type="number"]');
numInputs.forEach((input) => {
input.addEventListener("change", function (e) {
if (e.target.value === "" || e.target.value < 0) {
e.target.value = 0;
}
});
});

---

如果使用的是提交按钮，而输入框位于表单元素中，则可以使用min属性

<input class="input" type="number" value="0" id="amount" min="0" />

这将是理想的前端方式。你也可以使用JavaScript，但是它可以被用户禁用。

但是，在提交这个值(validation)时，在使用它之前，您应该检查它，因为即使是这个值也可以被绕过。

Answer 2

let newValue = currentValue - 0.01
if(newValue < 0) {
newValue = 0
}
inputField.value = newValue