Trimming Special Characters on Pasting it into textbox from Angular 2+ only

user_7713811 0
Viewed 4199

Rather than making use of jQuery or JavaScript functions outside the component file of file type ts, needs to trim/remove/restrict any of the special characters after pasting it into textbox from calling a function inside the TypeScript component only and the same needs to be reflected after pasting it to the textbox as an abstract function

The only allowed Special Characters are:

hyphens(-), parenthesis(()), dot(.), underscore(_), numbers(0-9), alphabets(a-zA-Z) and space

Here is the complete coding snippets shown below                                         

                                                                                              StackBlitz

HTML

<input type="text" id="bindingId" [(ngModel)]="bindingName"
  (keypress)="validateSpecialCharacters($event)" (paste)="onPaste($event)" 
  onCopy="return false" onDrag="return false" onDrop="return false"/>

Component.ts

public validateSpecialCharacters(e: any): boolean {
    try {
        if (/^[a-zA-Z0-9\-\_\s\(\)\.]*$/.test(e.key)) {
            return true;
        } else {
            e.preventDefault();
            return false;
        }
        // let k;
        // document.all ? k = e.keyCode : k = e.which;
        // k = e.charCode;  // k = event.keyCode;  (Both can be used)
        // return((k > 64 && k < 91) || (k > 96 && k < 123) || k === 8 || k === 32 || k === 40 || k === 41 || k === 45 || k === 46 || k === 95 || (k >= 48 && k <= 57));

    } catch (e) {
    }
}

onPaste(event: ClipboardEvent) {
    let clipboardData = event.clipboardData;
    let pastedText = clipboardData.getData('text');
    let trimmedText = pastedText.replace(/[^a-zA-Z0-9-()._ ]/g, '');
    (<HTMLInputElement>document.getElementById('bindingId')).value = trimmedText;
}

Results in special characters will still remains in textbox after pasting from clipboard. But not the trimmedText value called from onPaste()

The same above code should be modified such that whenever any characters are pasted from the clipboard to a textbox. By retaining the only allowed special characters and the rest needs to be discarded from the textbox

How will we able to achieve this by removing/trimming only special characters when pasting into the textbox? This should be accomplished by making use of jQuery or JavaScript built in functions inside the TypeScript only. But not outside the TypeScript i.e., by calling any functions from the <script> or via .js file

angular7 angular typescript paste special-characters
1 Answers

StackBlitz

Surprisingly found the solution by making use of event.preventDefault(); This method cancels the default onPaste() method returning boolean value instead of replacing the trimmedText value

onPaste(event: ClipboardEvent) {
    let clipboardData = event.clipboardData;
    let regexp = new RegExp('[^-_().;:,!a-zA-Z0-9/ ]');
    let pastedText = clipboardData.getData('text');
    let test = regexp.test(pastedText);
    let trimmedText = pastedText.replace(/[^a-zA-Z0-9-()._ ]/g, '');
    (<HTMLInputElement>document.getElementById('bindingId')).value = trimmedText;
    if (test) {
        event.preventDefault();
    }
}

If you find any of an other solutions then the above, you are always welcome to answer...

user_77138110
Related