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

Question

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

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

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

谢谢。

Answer 1

如果你想拒绝除0-9和.之外的任何输入，试试这个：

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

<input type="text" class="restricted">

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

Answer 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（浏览器负责将,规范化为.）

Answer 3

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

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

我在这个例子中使用reactjs，但当然你可以调整代码来达到你的目的

Answer 4

用这个：

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

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

<input name="someid" onkeypress="return isNumberKey(event)"/>

Answer 5

试试这个活动：

粘贴：

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
    */
  });
});