如何实现粘贴时自动移除输入框中的指定特殊字符？（适配大量输入框的通用方案）

我明白你的需求——要让所有输入框（除了密码框）在用户粘贴或手动输入时自动剔除<、>、$、!这些字符，而且不能像之前那样直接禁用粘贴功能，还要能通用覆盖所有输入框包括后续动态添加的。

先说说你原来代码的问题：它直接通过e.preventDefault()禁用了粘贴操作，这完全违背了你的需求；另外用bind绑定事件（现在jQuery更推荐用on），而且没有用事件委托，对于动态添加的输入框可能无效，这也可能是你之前尝试的代码只生效一次的原因之一。

下面是一套通用的解决方案，用事件委托实现，能覆盖所有现有和未来新增的input（非密码类型）和textarea：

$(document).ready(function() {
  // 定义要移除的特殊字符正则（全局匹配确保所有符合字符都被移除）
  const specialCharsRegex = /[<>$!]/g;

  // 处理粘贴事件：保留粘贴行为但清理内容
  $(document).on('paste', 'input:not([type=password]), textarea', function(e) {
    // 阻止默认粘贴，我们自己处理内容插入
    e.preventDefault();
    // 获取剪贴板中的文本内容
    const pastedText = (e.originalEvent || e).clipboardData.getData('text') || '';
    // 移除特殊字符
    const cleanedText = pastedText.replace(specialCharsRegex, '');
    
    // 兼容光标位置：把清理后的内容插入到用户选中的位置，而不是覆盖整个输入框
    const inputElement = this;
    const startPos = inputElement.selectionStart;
    const endPos = inputElement.selectionEnd;
    const currentValue = inputElement.value;
    
    // 拼接新内容并设置
    inputElement.value = currentValue.substring(0, startPos) + cleanedText + currentValue.substring(endPos);
    // 调整光标到粘贴内容的末尾，提升用户体验
    inputElement.selectionStart = inputElement.selectionEnd = startPos + cleanedText.length;
  });

  // 处理手动输入事件：拦截特殊字符输入
  $(document).on('keypress', 'input:not([type=password]), textarea', function(e) {
    const key = String.fromCharCode(!e.charCode ? e.which : e.charCode);
    if (specialCharsRegex.test(key)) {
      e.preventDefault();
      return false;
    }
  });
});

代码亮点： #

• 全局覆盖：用$(document).on()做事件委托，不管是页面初始加载的输入框，还是后续通过JS动态新增的，都能自动生效，完美适配你100+输入框的场景。
• 保留粘贴体验：没有禁用粘贴，只是清理粘贴内容，还兼容了光标位置，用户粘贴时不会丢失原有输入的内容结构。
• 双向拦截：既处理粘贴的特殊字符，也拦截手动输入的特殊字符，全方位满足需求。
• 正则优化：用全局匹配g标记，确保所有符合条件的特殊字符都会被移除，不会漏处理。

测试效果： #

当你粘贴<Naruto>$!Hello时，输入框会自动变成NarutoHello，完全符合你的预期；而且不管你重复粘贴多少次，每次都会正确清理特殊字符。

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