私はマテリアル入力コントロールを持っています。ユーザーが入力している間は特殊文字を制限していますが、エディターでいくつかの単語を入力し、特殊文字を含む単語をコピーして貼り付けると、動作しません。
特殊文字を防止するためのディレクティブを作成しましたが、コピーペーストでより適切なソリューション制限を提供できます。
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
再現する手順:
許可されていない特殊文字を入力します。正常に動作します。コピーペーストウィットでは特殊文字を使用できます
このようにしてみてください:
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)
}
}
次のアプローチは、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);
}
}
Ng Knife ユーティリティを使用できます
NgKnifeModuleをインポート
...
import { NgKnifeModule } from 'ng-knife';
...
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NgKnifeModule
],
...
});
export class AppModule { }
それを使用して:
<!-- Aphanumeric -->
<input knifeAlphanumeric type="text">