blockspecialcharsdirective.ts
1.68 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
import { Directive, ElementRef, HostListener } from '@angular/core';
@Directive({
selector: '[blockSpecialChars]'
})
export class BlockSpecialCharsDirective {
constructor(private el: ElementRef) { }
@HostListener('keypress', ['$event'])
@HostListener('paste', ['$event'])
@HostListener('drop', ['$event'])
handleInput(event: KeyboardEvent | ClipboardEvent | DragEvent) {
let text;
if (event.type === 'paste') {
text = (event as ClipboardEvent).clipboardData.getData('text/plain');
} else if (event.type === 'drop') {
text = (event as DragEvent).dataTransfer.getData('text/plain');
} else {
text = (event as KeyboardEvent).key;
}
if (text && /[^a-zA-Z0-9]/.test(text)) { // Adjust regex as needed
event.preventDefault();
if (event.type === 'drop') {
const inputElement = this.el.nativeElement as HTMLInputElement;
// Insert text without special characters at the current cursor position or append at the end
const sanitizedText = text.replace(/[^a-zA-Z0-9]/g, '');
const startPos = inputElement.selectionStart ? inputElement.value.length :0;
const endPos = inputElement.selectionEnd ? inputElement.value.length : 0;
const textBefore = inputElement.value.substring(0, startPos);
const textAfter = inputElement.value.substring(endPos, inputElement.value.length);
inputElement.value = textBefore + sanitizedText + textAfter;
// Set cursor position right after the inserted text
const cursorPos = startPos + sanitizedText.length;
inputElement.setSelectionRange(cursorPos, cursorPos);
}
}
}
}