在外部单击时使用 Javascript 设置输入值答案

【问题标题】：Set input value with Javascript on outside click在外部单击时使用 Javascript 设置输入值
【发布时间】：2021-02-08 15:13:56
【问题描述】：

我想为数字输入设置一个最大值。我使用了“max”HTML 属性，但无论如何用户都可以在最大值上写一个数字。在用户将其设置为超过最大值之后，有没有办法将该输入的值重置为我设置的最大值？也许当用户在该输入之外单击时？这是我的代码

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

【问题讨论】：

标签： javascript html function input

【解决方案1】：

您可能需要考虑使用范围控件以及在其旁边的span 元素中显示的范围值。这样，只允许您指定的值范围（这实际上是范围控件的用途）。

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

&lt;input type="range" name="days" id="days" min="1" max="365" value="1"&gt;&lt;span id="output"&gt;1&lt;/span&gt;

【讨论】：

【解决方案2】：

在表单提交时验证 max 属性。正如您在下面的 sn-p 中看到的，用户在尝试提交表单时会收到一条消息。

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

如果你想阻止用户输入超过 365 的值，你可以使用 js 来做到这一点。下面的 sn-p 显示了如何防止所有数字输入的值超过 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>

【讨论】：