防止HTML输入类型为数字的字段为空

Question

我知道HTML 5允许使用number类型的输入，只允许用户输入数字。当页面加载时，我将默认输入设置为0，但是用户可以擦除这个值，因此在用户点击提交时会提交一个空输入（null）？有没有办法让用户擦除输入中所有数字时，该值默认恢复为0？我不是在谈论验证方面。

我试图避免使用丑陋的JS hack，但如果那是唯一的方法，那么我想我必须走这条路线。

- Josh L

---

加入验证。将其设为必填项。 - epascarello

Answer 1

仅当表单提交时，HTML5验证规则才会起作用。如果您想要防止输入为空，则需要使用一些JS。

以下内容（不是“丑陋的JS hack”）将适用于页面上所有number输入并在用户尝试离开输入为空时插入一个0值。

const numInputs = document.querySelectorAll('input[type=number]')

numInputs.forEach(function(input) {
  input.addEventListener('change', function(e) {
    if (e.target.value == '') {
      e.target.value = 0
    }
  })
})

<input type="number" required value="0" />

<input type="number" required value="0" />

- Brett DeWoody

---

我觉得你是对的，我没有看到其他的方法。这应该是一个内置属性。 - Josh L

非常感谢！它完全满足我的需求！ - Josh L

Answer 2

因此请使用HTML5验证。除非表单有效，否则不会提交。

input:invalid {
  border: 1px solid red;
}

input:valid {
  border: 1px solid green;
}

<form>
  <label for="num">Pick a number?</label>
  <input id="num" name="number" type="number" value="0" min="0" required>
  <button>Submit</button>
</form>

- epascarello

---

很棒的答案！尽管我正在尝试防止用户在第一次输入时留下空白，正如Brett在他上面的回答中指出的那样，这是没有js不可能实现的。 - Josh L

你可以在设置默认值的代码中进行处理。这就是我会做的。我不会依赖JavaScript设置默认值。 - epascarello

Answer 3

如果你想使用 JQuery 完成它，这是代码：

<input type="number" class="minZero" />

  $(".minZero").blur(function () {
        if ($(this).val() == "") {
            $(this).val(0);
        } 
    })

- heker

---

目前你的回答不够清晰，请编辑并添加更多细节，以帮助其他人理解它如何回答问题。你可以在帮助中心找到有关如何编写好答案的更多信息。 - Community

Answer 4

如果您在React中使用受控输入并设置状态（或在许多其他类似的适用情况下），则可以引用valueAsNumber，如果用户尝试输入空值（NaN），那么它将为假，因此请使用OR 0。像这样：

onChange={(event) => setStateNamedValue(event.target.valueAsNumber || 0)}

这样就不会允许一个空值 - 它将会发送一个零。

- Ben in CA