在外部單擊時使用 Javascript 設置輸入值

Question

我想為數字輸入設置最大值。 我使用了“max” HTML 屬性，但無論如何用戶都可以在最大值上寫入一個數字。 在用戶將其設置為超過最大值之后，有沒有辦法將該輸入的值重置為我設置的最大值？ 也許當用戶在該輸入之外單擊時？ 這是我的代碼

<input type="number" name="days" id="days" min="1" max="365" value="<?php echo $ipq[0]['valueParam']?>">




                      

Answer 1

您可能需要考慮使用范圍控件以及在其旁邊的span元素中顯示的范圍值。 這樣，只允許您指定的值范圍（這實際上是范圍控制的用途）。

 const output = document.getElementById("output"); document.getElementById("days").addEventListener("input", function(){ output.textContent = this.value; });

 <input type="range" name="days" id="days" min="1" max="365" value="1"><span id="output">1</span>

Answer 2

max 屬性在表單提交時進行驗證。 正如您在下面的代碼段中看到的，用戶在嘗試提交表單時會收到一條消息。

 <form> <input type="number" name="days" id="days" min="1" max="365" value="366"> <input type='submit'> </form>

如果你想阻止用戶輸入超過 365 的值，你可以使用 js 來做到這一點。 下面的代碼片段顯示了如何防止所有數字輸入的值超過 365。

 document.querySelectorAll('input[type="number"]').forEach((el) => el.addEventListener('input', (e) => { let inputEl = e.currentTarget; if(parseFloat(inputEl.value) > parseFloat(inputEl.max)) { inputEl.value = inputEl.max; } }));

 <form> <input type="number" name="days" id="days" min="1" max="365" value="366"> <input type='submit'> </form>