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

Question

我有一个 type = "number"的 Input 元素，它应该只接受 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 是 '' 每当检测到无效输入状态。