如何在输入时删除输入的特殊字符？ （角度）

Question

在输入字段中输入文字时，如何删除特殊字符。我使用了（keyup）或（keydown）并替换了它。我附上了代码。我将不胜感激。谢谢！

removeSpecialCharacters(event) {
    let newVal = event.target.value.replace('[^A-Za-z0-9]', '');
    return newVal;
  }

<input maxlength="10" (keydown)="this.removeSpecialCharacters($event)">

Answer 1

现在newVal没有以任何方式连接到您的输入元素。尝试使用ngModel绑定它：

inputModel: string;

removeSpecialCharacters(event) {
    this.inputModel = event.target.value.replace('[^A-Za-z0-9]', '');
}

<input maxlength="10" (keydown)="this.removeSpecialCharacters($event)" [(ngModel)]="inputModel">

Answer 2

您可以使用此指令

import { Directive, HostListener, ElementRef, Input } from '@angular/core';
@Directive({
  selector: '[specialIsAlphaNumeric]'
})
export class SpecialCharacterDirective {

  regexStr = '^[a-zA-Z0-9_]*$';
  @Input() isAlphaNumeric: boolean;

  constructor(private el: ElementRef) { }


  @HostListener('keypress', ['$event']) onKeyPress(event) {
    return new RegExp(this.regexStr).test(event.key);
  }

  @HostListener('paste', ['$event']) blockPaste(event: KeyboardEvent) {
    this.validateFields(event);
  }

  validateFields(event) {
    setTimeout(() => {

      this.el.nativeElement.value = this.el.nativeElement.value.replace(/[^A-Za-z ]/g, '').replace(/\s/g, '');
      event.preventDefault();

    }, 100)
  }

}

像<input specialIsAlphaNumeric placeholder="my love" value="Mam"> 不要忘记在ngModule的声明中添加Directive类

Answer 3

使用数据绑定和（更改）事件侦听器。如果您要使用form，请考虑使用formbuilder并使用formControlName进行数据绑定。这是一个更简单的方法。