如何防止用户在复制粘贴操作时立即将带有无效字符的文本复制粘贴到输入文本字段中？答案

【问题标题】：How to prevent user from copy-pasting text with invalid characters into input text field immediately on copy-paste action?如何防止用户在复制粘贴操作时立即将带有无效字符的文本复制粘贴到输入文本字段中？
【发布时间】：2021-05-14 17:16:00
【问题描述】：

我在网上和这里阅读了一些关于堆栈溢出的答案，但我没有找到解决方案。

我试图阻止用户将无效字符（除了 a-z A-Z 字符之外的任何字符）复制粘贴到我的输入字段中。我不想在提交时这样做，而是在复制粘贴事件时这样做。

如果我复制包含所有无效字符（如“1234”）的粘贴文本，我的 if 块将被执行（正则表达式测试失败）并且工作正常。

但是，如果我复制的文本包含有效或无效字符的混合（如“12abc”或“abc12”），则它不起作用。

如何防止用户将包含无效字符的文本复制粘贴到我的输入文本中？

我在这样的输入文本元素上调用我的 javascript 函数：

function validatePaste(e) {
  var regex = /[a-z]/gi;
  var copiedText = e.clipboardData.getData('text')
  console.log(copiedText,regex.test(copiedText) )
  if (!regex.test(copiedText)) {
    e.preventDefault(); //this line executes only if copiedText has all invalid characters
    return false;
  }
}

&lt;input type="text" onpaste="validatePaste(event)"&gt;

【问题讨论】：

您的valid 字符是否只有数字？
所以让你的正则表达式匹配一个完整的字符串

标签： javascript onpaste

【解决方案1】：

你只测试那里有一个字符

这是一个更好的正则表达式——我们也不需要每次都分配它

const regex = /^[a-z]+$/gi; // gi makes A-Z irrelevant

function validatePaste(e) {
  const copiedText = e.clipboardData.getData('text')
  console.log(copiedText, regex.test(copiedText))
  if (!regex.test(copiedText)) {
    e.preventDefault(); //this line executes if copiedText has any invalid characters
    return false;
  }
}

&lt;input type="text" onpaste="validatePaste(event)"&gt;

【讨论】：

@mplungjan 谢谢。你介意解释为什么我的正则表达式失败了吗？是因为我错过了其中的“+$”吗？ “+$”是什么意思？谢谢
^=从字段开始，$ 到结束。 + 表示一个或多个。 regex101.com/r/BhgmhN/1
这与使用 * 而不是 + 有何不同？再次感谢
加：1个或多个，*为0个或多个regular-expressions.info/…。

【解决方案2】：

参考资料：

字符类（[...]）、锚点（^ 和 $）、重复（+、*）

/ 只是分隔符，它表示正则表达式的开始和结束。它的一种用途是现在您可以在其上使用修饰符。

function validatePaste(e) {
  var regex = /^[a-zA-Z]*$/;
  var copiedText = e.clipboardData.getData('text')
  if (!regex.test(copiedText)) {
    e.preventDefault(); //this line executes only if copiedText has all invalid characters
    return false;
  }
}

&lt;input type="text" onpaste="validatePaste(event)"&gt;

【讨论】：