防止 html 输入类型=数字永远为空

Question

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

试图避免丑陋的JS黑客，但如果这是唯一的方法，那么我想我将不得不走那条路。

Answer 1

HTML5 验证规则仅在表单提交时有所帮助。如果你想防止输入为空，你需要使用一些JS。

以下内容（不是"丑陋的JS黑客"）将适用于页面上的所有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" />

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>

Answer 3

如果你想用JQuery来做，这里是：

<input type="number" class="minZero" />
  $(".minZero").blur(function () {
        if ($(this).val() == "") {
            $(this).val(0);
        } 
    })

Answer 4

如果你在 React 中使用受控输入并设置状态（或在许多其他类似的适用情况下），你可以引用 valueAsNumber，如果用户尝试输入一个空白值 （NaN），那将是假的，所以使用 OR 0。喜欢这个：

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

这将不允许空白值 - 它将发送零。