如何编写Angular指令禁止粘贴纯空格/制表符并自动修剪前置空白

需求说明 #

需要对必填textarea的粘贴行为做两层规则限制：

• 阻止粘贴仅由空格、制表符组成的纯空白内容，避免用户绕过必填校验
• 自动修剪有效粘贴内容前的前置空格、制表符，避免多余前置空白显示

原有实现的问题 #

之前写的逻辑存在几个明显错误，导致无法正常生效：

• 正则写法错误：const cleanedString = pastedText.replace('/\t/',''); 中给正则加了引号，变成了普通字符串匹配，且仅会替换第一个匹配到的制表符，无法处理多连续空白、空格和制表符混合的场景
• 仅判断首字符charCode的逻辑无法处理连续多个前置空白的情况，且浏览器默认粘贴行为无法在不拦截的前提下中途修改粘贴内容，这也是逻辑难生效的核心原因

正确实现思路 #

核心逻辑是主动拦截默认粘贴行为，手动完成内容处理和插入，不要尝试在默认粘贴流程中修改内容，浏览器没有开放默认粘贴流程的中途修改权限。
具体实现步骤：

1. 触发paste事件时先调用event.preventDefault()拦截默认粘贴动作
2. 从剪贴板对象中读取原始的纯文本粘贴内容
3. 对原始内容做前置空白修剪，按需匹配要清理的空白字符（空格、制表符等）
4. 判断修剪后的内容是否为纯空白，如果是直接终止逻辑，不做内容插入
5. 如果存在有效内容，将处理后的文本插入到textarea当前光标位置，同时还原光标位置，保证交互和默认粘贴一致
6. 手动触发input事件，保证前端框架的双向绑定能正常同步值

可直接复用的代码示例 #

function onPaste(event) {
  // 拦截默认粘贴行为
  event.preventDefault();
  const textarea = event.target;
  // 读取剪贴板纯文本内容
  const rawPasteText = event.clipboardData.getData('text/plain');
  // 修剪开头所有连续的空格、制表符，如果需要清理换行可在正则中加\n，全量去前导空白可直接用rawPasteText.trimStart()
  const cleanedText = rawPasteText.replace(/^[ \t]+/, '');
  // 修剪后无有效内容直接拦截，不插入
  if (!cleanedText.trim()) return;

  // 获取当前光标选区位置
  const selectionStart = textarea.selectionStart;
  const selectionEnd = textarea.selectionEnd;
  // 拼接处理后的内容到对应位置
  textarea.value = textarea.value.slice(0, selectionStart) + cleanedText + textarea.value.slice(selectionEnd);
  // 移动光标到插入内容末尾，还原默认粘贴的交互体验
  const newCursorPos = selectionStart + cleanedText.length;
  textarea.setSelectionRange(newCursorPos, newCursorPos);
  // 触发input事件，保证Vue/React/Angular等框架的双向绑定正常同步值
  textarea.dispatchEvent(new Event('input', { bubbles: true }));
}

注意事项 #

• 正则参数不要加引号，匹配前置连续空白必须加^锚定字符串开头，否则只会替换第一个匹配到的空白字符
• 如果业务场景需要保留粘贴内容的中间、尾部空白，不要直接用全量trim()方法，仅处理前置部分即可
• 手动插入内容后必须触发input事件，否则会出现textarea显示值和框架绑定值不一致的问题

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