Javascript 如何防止ionic 输入中的特殊字符.

我们可以为此编写一个验证器，它接受一个输入正则表达式，它验证有效和无效的字符，然后我们用空字符串替换不需要的字符，我们还需要查找粘贴事件，如果粘贴了无效字符，它们也需要清除，这一切都可以使用事件keydown和paste的@HostListener属性来完成！

指令

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

@Directive({
  selector: '[appPattern]',
})
export class PatternDirective {
  @Input() appPattern: string = '[A-Za-z0-9]';

  @HostListener('keyup', ['$event']) public onKeydown(event: any) {
    const value: string = event.target.value;
    if (!value) {
      return true;
    }
    const regExpr = new RegExp(`^(${this.appPattern})+$`);
    if (!regExpr.test(value)) {
      event.target.value = value.replace(
        new RegExp(`(${this.appPattern})|.*`, 'gm'),
        '$1'
      );
      event.preventDefault();
      return false;
    }
  }

  @HostListener('paste', ['$event']) public onPaste(event: any) {
    event.preventDefault();
    let clipboardText = event.clipboardData.getData('text');
    event.target.value = clipboardText.replace(
      new RegExp(`(${this.appPattern})|.*`, 'gm'),
      '$1'
    );
  }
  constructor(private elementRef: ElementRef) {}
}

HTML

 <ion-input
    type="text"
    [(ngModel)]="todo.title1"
    name="title1"
    appPattern="[A-Za-z0-9]"
  ></ion-input>

Stackblitz Demo