如何在angular8中将空白限制为第一个字符并在字符后留空格

时间:2019-12-27 07:10:15

标签: javascript angular

我试图将特殊字符和空白限制为第一个字符,但是我能够实现对特殊字符的限制,但不能将空格限制为第一个字符。我使用了自定义管道。还附有工作演示。 因此,现在在输入字段中已限制了特殊字符,因此我必须将空格限制为第一个字符,并在字母数字后添加空格。

HTML:

 <input type="text" class="form-control min-w300" placeholder="Search Agent" [(ngModel)]="wildCardSearch" (ngModelChange)="searchChange($event)" appInputRestriction>

Ts: 我将选择器设为appInputRestrictor,并且已经这样使用它。

 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);
  }

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

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

    }, 100)
  }

Demo

1 个答案:

答案 0 :(得分:1)

您正在寻找的解决方案称为 this.el.nativeElement.selectionStart

这是您的代码库。

@HostListener('keydown', ['$event'])
  onKeyDown(event: KeyboardEvent) { 

   if ( this.el.nativeElement.selectionStart === 0 && event.key === ' ' ) {
     event.preventDefault();
   }

    if (!RegExp(this.regexStr).test(event.key)) {
      event.preventDefault();
    }
  }

我也为此创建了演示。请检查以下内容:

https://stackblitz.com/edit/angular-iws9ns