Reference → https://kognifai.visualstudio.com/Vessel_Insight/_git/Vessel_Insight?path=/Applications/vesselinsight/src/app/shared/directive/text-field-restriction.directive.ts
Directive
import { Input, HostListener, Directive } from '@angular/core';
import { keyCodes, AppConstants } from 'src/app/app.constants';
@Directive({
selector: '[appTextFieldRestriction]'
})
export class TextFieldRestrictionDirective {
constructor() {
// This is intentional
}
@Input() inputPattern: string;
regex: string;
@HostListener('keydown', ['$event']) onKeyDown(event: KeyboardEvent): void {
this.inputPattern = this.inputPattern ? this.inputPattern : 'alphanumeric';
this.regex = AppConstants.TEXT_FIELD_PATTERNS[this.inputPattern];
this.checkCharacters(event);
}
checkCharacters(event: KeyboardEvent): void {
const actionKeys: string[] = [keyCodes.Delete, keyCodes.Backspace, keyCodes.Tab, keyCodes.Escape, keyCodes.Enter, keyCodes.NumpadDecimal as string];
const controlKeys: string[] = [keyCodes.KeyA, keyCodes.KeyC, keyCodes.KeyX, keyCodes.KeyV];
const navigationKeys: string[] = [keyCodes.Home, keyCodes.End, keyCodes.ArrowDown, keyCodes.ArrowUp, keyCodes.ArrowLeft, keyCodes.ArrowRight];
if (actionKeys.includes(event.key) || (event.ctrlKey && controlKeys.includes(event.key)) || navigationKeys.includes(event.key)) {
// let it happen, don't do anything
return;
}
const isCharValid: boolean = new RegExp(this.regex).test(event.key);
if (!isCharValid) {
event.preventDefault();
}
}
@HostListener('paste', ['$event'])
onPaste(event: ClipboardEvent): void {
let regex: any = /[^a-z0-9]/gi;
if (this.inputPattern === 'numeric') {
regex = /[\D]/g;
}
event.preventDefault();
const pastedInput: string = event.clipboardData
.getData('text/plain')
.replace(regex, '');
(document as any).execCommand('insertText', false, pastedInput);
}
}
Keycode enum
export enum keyCodes {
ArrowDown = 'ArrowDown',
ArrowUp = 'ArrowUp',
ArrowRight = 'ArrowRight',
ArrowLeft = 'ArrowLeft',
Escape = 'Escape',
Enter = 'Enter',
Delete = 'Delete',
Backspace = 'Backspace',
Tab = 'Tab',
NumpadDecimal = '.',
KeyA = 'a',
KeyC = 'c',
KeyX = 'x',
KeyV = 'v',
End = 'End',
Home = 'Home'
}