angular2 / typescriptを使用して入力フィールドの特殊文字を制限する方法
Angular2は初めてです。入力フィールドの特殊文字を制限する必要があります。必要な数字とアルファベットを指定し、特殊文字をブロックする必要がある場合です。どなたかお手伝いできますか。
ここでコードを共有しています：
In HTML:
<md-input-container>
<input type="text" (ngModelChange)="omit_special_char($event)" mdInput name="name" [(ngModel)]="company.name" placeholder="Company Name" #name="ngModel" minlength="3" required>
</md-input-container>
TSでは：public e：any;
omit_special_char(val)
{
var k;
document.all ? k = this.e.keyCode : k = this.e.which;
return ((k > 64 && k < 91) || (k > 96 && k < 123) || k == 8 || k == 32 || (k >= 48 && k <= 57));
}
あなたはすべてを正しく行っていました。関数を少し変更するだけです。 ngModelChangeを使用して、そこにないイベントをバインドしていました。以下に示すように、keypressイベントハンドラーを使用できます。
[〜＃〜] html [〜＃〜]
<md-input-container>
<input type="text" (keypress)="omit_special_char($event)" mdInput name="name" [(ngModel)]="company.name" placeholder="Company Name" #name="ngModel" minlength="3" required>
</md-input-container>
コンポーネント
omit_special_char(event)
{
var k;
k = event.charCode; // k = event.keyCode; (Both can be used)
return((k > 64 && k < 91) || (k > 96 && k < 123) || k == 8 || k == 32 || (k >= 48 && k <= 57));
}
「event」は、先に渡した「$ event」自体のオブジェクトです。これを試してみてください、確実にangular2で動作します。
この投稿と他の投稿のいくつかの回答を組み合わせて、手動入力と貼り付けデータの両方を処理するためのカスタムディレクティブを作成しました。
ディレクティブ：
import { Directive, ElementRef, HostListener, Input } from '@angular/core';
@Directive({
selector: '[appInputRestriction]'
})
export class InputRestrictionDirective {
inputElement: ElementRef;
@Input('appInputRestriction') appInputRestriction: string;
arabicRegex = '[\u0600-\u06FF]';
constructor(el: ElementRef) {
this.inputElement = el;
}
@HostListener('keypress', ['$event']) onKeyPress(event) {
if (this.appInputRestriction === 'integer') {
this.integerOnly(event);
} else if (this.appInputRestriction === 'noSpecialChars') {
this.noSpecialChars(event);
}
}
integerOnly(event) {
const e = <KeyboardEvent>event;
if (e.key === 'Tab' || e.key === 'TAB') {
return;
}
if ([46, 8, 9, 27, 13, 110].indexOf(e.keyCode) !== -1 ||
// Allow: Ctrl+A
(e.keyCode === 65 && e.ctrlKey === true) ||
// Allow: Ctrl+C
(e.keyCode === 67 && e.ctrlKey === true) ||
// Allow: Ctrl+V
(e.keyCode === 86 && e.ctrlKey === true) ||
// Allow: Ctrl+X
(e.keyCode === 88 && e.ctrlKey === true)) {
// let it happen, don't do anything
return;
}
if (['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'].indexOf(e.key) === -1) {
e.preventDefault();
}
}
noSpecialChars(event) {
const e = <KeyboardEvent>event;
if (e.key === 'Tab' || e.key === 'TAB') {
return;
}
let k;
k = event.keyCode; // k = event.charCode; (Both can be used)
if ((k > 64 && k < 91) || (k > 96 && k < 123) || k === 8 || k === 32 || (k >= 48 && k <= 57)) {
return;
}
const ch = String.fromCharCode(e.keyCode);
const regEx = new RegExp(this.arabicRegex);
if (regEx.test(ch)) {
return;
}
e.preventDefault();
}
@HostListener('paste', ['$event']) onPaste(event) {
let regex;
if (this.appInputRestriction === 'integer') {
regex = /[0-9]/g;
} else if (this.appInputRestriction === 'noSpecialChars') {
regex = /[a-zA-Z0-9\u0600-\u06FF]/g;
}
const e = <ClipboardEvent>event;
const pasteData = e.clipboardData.getData('text/plain');
let m;
let matches = 0;
while ((m = regex.exec(pasteData)) !== null) {
// This is necessary to avoid infinite loops with zero-width matches
if (m.index === regex.lastIndex) {
regex.lastIndex++;
}
// The result can be accessed through the `m`-variable.
m.forEach((match, groupIndex) => {
matches++;
});
}
if (matches === pasteData.length) {
return;
} else {
e.preventDefault();
}
}
}
使用法：
<input type="text" appInputRestriction="noSpecialChars" class="form-control-full" [(ngModel)]="noSpecialCharsModel" [ngModelOptions]="{standalone: true}" [disabled]="isSelected" required>
<input type="text" appInputRestriction="integer" class="form-control-full" [(ngModel)]="integerModel" [ngModelOptions]="{standalone: true}">
これは実際に私の最初のスタックオーバーフローの回答なので、お役に立てば幸いです。
angular2コードサンプル。
_<input type="text" pattern="/[A-Z]{5}\d{4}[A-Z]{1}/i">
_または
_<md-input-container>
<input type="text" (keypress)="omit_special_char($event)" mdInput name="name" [(ngModel)]="company.name" placeholder="Company Name" #name="ngModel" minlength="3" required>
</md-input-container>
omit_special_char(val)
{
var k;
document.all ? k = this.e.keyCode : k = this.e.which;
return ((k > 64 && k < 91) || (k > 96 && k < 123) || k == 8 || k == 32 || (k >= 48 && k <= 57));
}
_angular2/TypeScriptはStackOverflowでサポートされないため、ここに純粋なJavaScriptの作業サンプルがあります。
_function omit_special_char(e) {
var k;
document.all ? k = e.keyCode : k = e.which;
return ((k > 64 && k < 91) || (k > 96 && k < 123) || k == 8 || k == 32 || (k >= 48 && k <= 57));
}_<input type="text" onkeypress="return omit_special_char(event)"/>この質問は Anglejsテキストボックスの特殊文字を制限する方法 でも回答されています
見てください。興味深い入力があります。
正規表現パターンを使用することもできます
<md-input-container>
<input type="text" (ngModelChange)="omit_special_char($event)" mdInput name="name" [(ngModel)]="company.name" placeholder="Company Name" #name="ngModel" minlength="3" required>
</md-input-container>
public omit_special_char(e: any) {
try {
let k;
if (/^[a-zA-Z0-9\s]*$/.test(e.key)) {
return true;
} else {
e.preventDefault();
return false;
}
} catch (e) {
}
}
ng-patternを使用できます。とてもシンプルで便利です
入力タグでパターンを使用できます。angular7で正常に動作します。
特殊文字を検証するため
<input #Name="ngModel" type="text" name="Name" required maxlength="256" minlength="2"
[(ngModel)]="Name" class="validate form-control" pattern="^[a-zA-Z0-9]+$">
</div>
スペースの使用を許可=> pattern = "^ [a-zA-Z0-9] + $">
検証メッセージを示す完全な使用法：
<label for="Name" class="form-label">{{"Name" | localize}}*</label>
<div class="input-group"><input #dashboardName="ngModel" type="text" name="Name" required maxlength="256" minlength="2"
[(ngModel)]="Name" class="validate form-control" pattern="^[a-zA-Z0-9 ]+$">
</div>
<validation-messages [formCtrl]="Name"></validation-messages>
</div>