防止 html input type=number 永远为空

Question

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

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

原文由 Josh L 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 发布，翻译遵循 CC BY-SA 4.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>

原文由 epascarello 发布，翻译遵循 CC BY-SA 3.0 许可协议