防止将错误的值粘贴到输入数字类型中答案

【问题标题】：Prevent pasting wrong values into Input number type防止将错误的值粘贴到输入数字类型中
【发布时间】：2019-07-08 16:37:08
【问题描述】：

我有一个 type = "number" 的 Input 元素，它应该只接受 0,1,..,9 和 "." 默认情况下，您还可以使用 +、- 以及我使用 EventListener“keydown”和 keyCodes 阻止的其他字符。它工作正常。

但是如何防止用户将其他内容粘贴或拖放到输入中？我试图验证 input.value 但当它不是有效数字时它实际上给了我“”。有没有办法在粘贴之前查看用户想要粘贴的内容？

我也知道，我可以将类型更改为“文本”，但至少目前它不是一个选项。

谢谢。

【问题讨论】：

您应该可以使用oninput 来处理这个问题。
使用模式属性只接受 0-9。使用min="0" 来防止负数。当然他们可以输入无效字符，但表单将无效并阻止提交

标签： javascript html input types numbers

【解决方案1】：

试试这个活动：

粘贴：

https://developer.mozilla.org/en-US/docs/Web/Events/paste

拖动：

https://developer.mozilla.org/en-US/docs/Web/Events/drag

也许看看这个：

How do I make control characters programatically in Javascript?

编辑：

document.getElementById('id').addEventListener('paste', (e) => {
  let pre = e.target.value;
  window.setTimeout(() => {
    console.log(pre);
    console.log(e.target.value);
    /*
    Get the pasted value here, and edit the input
    */
  });
});

【讨论】：

如果有人只是输入了错误的数字，或者想要粘贴正确的数字，这些事件中的任何一个将如何提供帮助？
如果我点击文本字段并输入+会怎样？

【解决方案2】：

没有javascript

:invalid {
  color: red
}

<form method="post" action="https://httpbin.org/post">
  <input type="number" name="num" pattern="[0-9]*[.,]?[0-9]+" min="0" step="any">
  <!-- you won't be able to submit when the form is invalid -->
  <input type="submit">
</form>

PS（浏览器负责将, 标准化为.）

【讨论】：

【解决方案3】：

使用这个：

它允许您对文本使用任何类型的输入过滤器，包括各种数字过滤器。这将正确处理复制+粘贴、拖放、键盘快捷键、上下文菜单操作、不可键入的键和所有键盘布局。

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

&lt;input name="someid" onkeypress="return isNumberKey(event)"/&gt;

【讨论】：

如果有人只是输入了错误的数字，或者想要粘贴正确的数字，这些事件中的任何一个将如何提供帮助？
我也添加了“粘贴”
检查，我修好了
不，你没有。我仍然可以将无效值粘贴到该输入中
你粘贴什么？

【解决方案4】：

我反驳过类似的事情，我使用正则表达式过滤任何字符的输入值，只接受数字。这个解决方案的缺点是它只接受整数而不是数字。这是一个代码示例：

handleChange = (e) => {
    const re = /^[0-9\b]+$/;
    if (e.target.value === '' || re.test(e.target.value)) {
         this.setState({Number: e.target.value})
      }
  }

我在这个例子中使用了 reactjs，当然你可以调整代码来满足你的目的

【讨论】：

【解决方案5】：

如果您想拒绝除0-9 和. 之外的任何输入，请尝试以下操作：

Array.from(document.getElementsByClassName('restricted')).forEach(elem => {
  elem.addEventListener('input', event => {
    event.target.value = event.target.value.replace(/[^0-9\.]/g, '');
  });
});

&lt;input type="text" class="restricted"&gt;

一旦此脚本到位，您可以将.restricted 添加到任何输入以实现相同的效果。不幸的是，这个技巧不适用于input[type="number"]，因为每当检测到无效输入状态时，event.target.value 就是''。

【讨论】：