无法验证输入类型编号的点答案

【问题标题】：Cannot validate dot for input type number无法验证输入类型编号的点
【发布时间】：2018-10-22 07:51:12
【问题描述】：

我正在尝试为输入类型号添加验证以仅接受整数。我在元素中添加了pattern="\d*"。它适用于输入10.12、10.13。 但输入失败10.

我打印了 html 输入的值。它是10 而不是10.。

<script>
    function getValue(){
        alert(document.getElementById("numberInput").value);
    }   
</script>   

<input type="number" id="numberInput"> </input>
<button onclick="getValue();">

理想情况下，它应该将10. 视为无效输入。

【问题讨论】：

请提供minimal, complete and verifiable example。你的模式在哪里？你的验证函数在哪里？
这里的问题是“10”。对于输入类型整数，被视为 10。
How to avoid Decimal values in input type number的可能重复
提供的限制按键字符的解决方案可以正常工作。但万一有人复制并粘贴“10”。输入类型号。

标签： javascript html

【解决方案1】：

粘贴确实很棘手。我想出了以下几点：

function setValid(target) {
  const val = target.value;
  // Remove value, as setting the same value has no effect.
  target.value = '';
  // Reset value on the next tick
  requestAnimationFrame(() => target.value = val);
}

<form action="#" method="post">
  Numbers: <input name="num"
                  type="number"
                  min="1"
                  step="1"
                  onblur="setValid(this)"
                  onpaste="requestAnimationFrame( () => setValid(this) )"
                  onkeypress="return event.charCode >= 48 && event.charCode <= 57"
                  title="Numbers only">
  <input type="submit">
</form>

它的作用如下：

当输入失去焦点时，它会重置值
粘贴时，它会等到值被设置，然后重置它。

可能还有更好的解决方案。

此答案基于kneeki's answer here。

【讨论】：