Angular指令拦截非法输入时，阿拉伯复合字符“لا”处理异常求解决方案

问题出在阿拉伯复合字符是通过输入法组合输入生成的，这类字符不是单个keydown事件就能完整捕获的——当输入“لا”时，可能先触发了单个“ا”的keydown事件，你的正则没拦截它，之后输入“ل”时才触发拦截，但此时“ا”已经留在输入框里了。

给你两个关键修改方向，直接改造你的指令即可：

1. 处理输入法组合事件（CompositionEvent） #

阿拉伯语这类语言的复合字符通常由输入法组合生成，会触发compositionstart、compositionend事件。你需要在组合输入开始时暂停按键校验，结束后统一检查整个输入内容：

import { Directive, HostListener, ElementRef } from '@angular/core';

@Directive({
  selector: '[appRestrictInput]' // 替换成你自己的指令选择器
})
export class RestrictInputDirective {
  private isComposing = false;
  private previousValue = '';
  // 按需调整正则，只保留你允许的英文字母、数字、符号
  private allowedRegex = /^[A-Za-z0-9!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]*$/;

  constructor(private el: ElementRef) {}

  // 组合输入开始时，保存当前值并标记状态
  @HostListener('compositionstart')
  onCompositionStart() {
    this.isComposing = true;
    this.previousValue = this.el.nativeElement.value;
  }

  // 组合输入结束后，校验整个输入内容
  @HostListener('compositionend')
  onCompositionEnd() {
    this.isComposing = false;
    const currentValue = this.el.nativeElement.value;
    if (!this.allowedRegex.test(currentValue)) {
      // 不符合规则就回退到组合前的内容
      this.el.nativeElement.value = this.previousValue;
      // 手动触发input事件，确保ngModel绑定值同步更新
      this.el.nativeElement.dispatchEvent(new Event('input'));
    }
  }

  @HostListener('keydown', ['$event'])
  onKeyDown(event: KeyboardEvent) {
    // 组合输入期间不拦截按键
    if (this.isComposing) return;

    // 放行必要的功能按键（如退格、方向键）
    const functionalKeys = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', 'Escape'];
    if (functionalKeys.includes(event.key)) return;

    // 校验单个按键
    if (!this.allowedRegex.test(event.key)) {
      event.preventDefault();
    }
  }

  // 处理粘贴事件，防止粘贴非法内容
  @HostListener('paste', ['$event'])
  onPaste(event: ClipboardEvent) {
    const pastedText = event.clipboardData?.getData('text') || '';
    if (!this.allowedRegex.test(pastedText)) {
      event.preventDefault();
    }
  }
}

2. 兜底校验整个输入值 #

除了组合事件，还要覆盖粘贴、拖拽输入等场景，上面的代码已经包含了粘贴事件处理，同时在组合结束后校验整个输入框内容，确保没有漏网的非法字符。

另外，你提到用ngModel绑定无法添加表单验证器，没关系，上面的指令直接操作DOM并手动触发input事件，能确保ngModel绑定的值和输入框内容完全同步，不会出现不一致的情况。

内容的提问来源于stack exchange，提问作者Abdullah N Bani Yaseen