防止html输入接受“ä”字符

Question

我正在开发一个 Angular 应用程序，并且我有一个输入，我不应该接受任何预期的英文字母和数字以及一些简单的字符，我通过创建一个指令并创建一个正则表达式来阻止输入接受阿拉伯字母如果用户输入， if !myRegex.test(event.key) event.preventDefault() 它可以工作，但是当插入这个字母“ä”（这是一个复合字母）时，是的，检查捕获了它，但是输入填充了这个字母“â” 有什么建议可以解决这个问题吗？ 通过使用指令 输入与 propritt ngModel 类似，所以我无法像表单控件那样向其添加验证器

我尝试创建一个正则表达式，它适用于所有阿拉伯字母，但正如我在详细信息中所说的，这个“ä”

Answer 1

import { Directive } from '@angular/core';

@Directive({
  standalone: true,
  selector: '[onlyASCII]',
  host: { '(input)': 'onInputChange($event)' },
})
export class OnlyAsciiDirective {
  onInputChange(event: any) {
    event.srcElement.value = event.srcElement.value.replace(
      /[^a-zA-Z0-9]/g,
      ''
    );
  }
}

<input onlyASCII />