启用粘贴后验证失效，如何为输入框粘贴操作应用指定验证？

你的代码目前只监听了keypress事件——这个事件只会在用户通过键盘逐个输入字符时触发，但粘贴操作（不管是右键菜单粘贴还是快捷键Ctrl+V）会触发独立的paste事件，所以原来的验证逻辑根本覆盖不到粘贴场景，这就是为什么粘贴时验证失效的原因。

下面给你两种解决方案，你可以根据需求选择：

方案一：完全阻止不符合规则的粘贴 #

这种方案会直接拒绝包含特殊字符的粘贴内容，和键盘输入的验证逻辑保持一致：

首先，我们把验证逻辑抽成一个通用函数，方便复用：

// 验证输入内容是否仅包含字母和数字
function isValidInput(value) {
  const regex = /^[a-zA-Z0-9]+$/;
  return regex.test(value);
}

然后分别处理键盘输入和粘贴事件：

// 处理键盘按键输入
function handleKeyPress(event) {
  const key = String.fromCharCode(event.charCode || event.which);
  if (!isValidInput(key)) {
    event.preventDefault();
    return false;
  }
}

// 处理粘贴操作
function handlePaste(event) {
  // 获取剪贴板中的文本内容
  const pastedContent = (event.clipboardData || window.clipboardData).getData('text');
  if (!isValidInput(pastedContent)) {
    // 不符合规则就阻止粘贴
    event.preventDefault();
    return false;
  }
}

// 给输入框绑定两个事件
$('#businessId')
  .on('keypress', handleKeyPress)
  .on('paste', handlePaste);

方案二：自动过滤粘贴内容中的特殊字符 #

如果不想完全阻止粘贴，而是自动保留合法字符、过滤掉特殊字符，体验会更友好，修改handlePaste函数即可：

function handlePaste(event) {
  event.preventDefault(); // 先阻止默认粘贴行为
  const pastedContent = (event.clipboardData || window.clipboardData).getData('text');
  // 过滤掉所有非字母数字的字符
  const filteredContent = pastedContent.replace(/[^a-zA-Z0-9]/g, '');
  
  // 将过滤后的内容插入到输入框当前光标位置
  const input = event.target;
  const cursorStart = input.selectionStart;
  const cursorEnd = input.selectionEnd;
  input.value = input.value.slice(0, cursorStart) + filteredContent + input.value.slice(cursorEnd);
  
  // 调整光标到插入内容的末尾
  input.selectionStart = input.selectionEnd = cursorStart + filteredContent.length;
}

这样不管用户粘贴什么内容，最终只有合法的字母和数字会留在输入框里，既满足验证要求，又不影响用户的粘贴操作。

内容的提问来源于stack exchange，提问作者MANSOOR ALI