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

Question

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

我试图阻止用户将无效字符（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;
  }
}

<input type="text" onpaste="validatePaste(event)">

Answer 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;
  }
}

<input type="text" onpaste="validatePaste(event)">

Answer 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;
  }
}

<input type="text" onpaste="validatePaste(event)">

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

How to prevent user from copy-pasting text with invalid characters into input text field immediately on copy-paste action?

javascript

onpaste