Question

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

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

Answer 1

所以使用HTML5 validation。除非有效，否则不会提交。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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" minlength="1" required value="0" />

<input type="number" minlength="1" required value="0" />

Answer 3

//This simple solution worked fine for me.

    <form method="post">
    <br>
    <div> Broj mjerenja:<input type="number" name="num1" min="1" max="1000"> </div>
    <div><input type="submit" value="Unesi"></div>
</form>

 <?php 
$brojMjerenja=10;//just in case
if ((isset($_POST['num1']))&&(($_POST['num1'])!="")) {
    $brojMjerenja =$_REQUEST['num1'];
}
 ?>

防止html输入type = number永远为空

3 个答案: