Question

我有一个类型为“ number”的Input元素，应该只接受0,1，..，9和“。”。默认情况下，您也可以使用+，-和其他字符，这些字符我可以通过EventListener“ keydown”和keyCodes来防止。很好。

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

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

谢谢。

Answer 1

如果您要拒绝void do_stuff (really_big* thing) { thing->something = ...; }和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

尝试此事件：

粘贴：

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

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

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

 File "C:/Users *filepath*", line 89, in settings_save
        file.write('\n' + str(entry1.get()) + ' \n' + str(entry2.get()) + '\n' + str(entry3.get()))
    NameError: name 'entry1' is not defined

在此示例中，我使用reactjs，但是您当然可以调整代码以达到您的目的

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

5 个答案: