web-dev-qa-db-ja.com

マテリアル入力で特殊文字を制限する方法

私はマテリアル入力コントロールを持っています。ユーザーが入力している間は特殊文字を制限していますが、エディターでいくつかの単語を入力し、特殊文字を含む単語をコピーして貼り付けると、動作しません。

特殊文字を防止するためのディレクティブを作成しましたが、コピーペーストでより適切なソリューション制限を提供できます。

app.component.html：

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input matInput specialIsAlphaNumeric placeholder="Favorite food" value="Sushi">
  </mat-form-field>

  <mat-form-field class="example-full-width">
    <textarea matInput placeholder="Leave a comment"></textarea>
  </mat-form-field>
</form>

指令：

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

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

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

}

デモはこちらを参照 ：

https://stackblitz.com/edit/angular-cijbqy-biwrck?file=app%2Finput-overview-e [stackblit][1]

再現する手順：

許可されていない特殊文字を入力します。正常に動作します。コピーペーストウィットでは特殊文字を使用できます

angularangular5angular2-directivesangular6angular-directive
8
Mohamed Sahir

このようにしてみてください：

stackblitzの例

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

}
18
UnluckyAj

次のアプローチは、setTimeout呼び出しを使用せずに機能します。つまり、 Aashish K Jhaによる他の応答 が使用されている場合、入力コントロールに特殊文字が点滅することはありません。

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: ClipboardEvent) {
    this.validateFields(event);
  }

  validateFields(event: ClipboardEvent) {
    event.preventDefault();
    const pasteData = event.clipboardData.getData('text/plain').replace(/[^a-zA-Z0-9 ]/g, '');
    document.execCommand('insertHTML', false, pasteData);
  }
}
0
vandermast

Ng Knife ユーティリティを使用できます

  1. NgKnifeModuleをインポート

    ... 
import { NgKnifeModule } from 'ng-knife';
...
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgKnifeModule
  ],
  ...
});
export class AppModule { }

  2. それを使用して：

    <!-- Aphanumeric -->
<input knifeAlphanumeric type="text">
0
Marcelo