仅从 Angular 2+ 将特殊字符粘贴到文本框中时修剪特殊字符答案

【问题标题】：Trimming Special Characters on Pasting it into textbox from Angular 2+ only仅从 Angular 2+ 将特殊字符粘贴到文本框中时修剪特殊字符
【发布时间】：2020-07-14 01:11:41
【问题描述】：

而不是使用文件类型为ts的组件文件之外的jQuery或JavaScript函数，需要在将任何特殊字符粘贴到文本框中后对其进行修剪/删除/限制以调用内部的函数TypeScript 仅组件，同样需要将其作为抽象函数粘贴到文本框后反映

唯一允许的特殊字符是：

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

下面是完整的编码sn-ps

????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;
}

从剪贴板粘贴后，特殊字符的结果仍将保留在文本框中。但不是从onPaste() 调用的trimmedText 值

应修改上述相同的代码，以便无论何时将任何字符从剪贴板粘贴到文本框。通过保留唯一允许的特殊字符，其余的需要从文本框中丢弃

在粘贴到文本框时，我们如何通过仅删除/修剪特殊字符来实现这一点？这应该通过使用jQuery 或JavaScript 仅在TypeScript 内的内置函数来完成。但不在TypeScript 之外，即通过从<script> 或通过.js 文件调用任何函数

【问题讨论】：

标签： angular typescript angular7 special-characters paste

【解决方案1】：

?StackBlitz

使用 event.preventDefault(); 出人意料地找到了解决方案此方法取消了默认的onPaste() 方法返回布尔值而不是替换trimmedText 值

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();
    }
}

如果您发现上述任何其他解决方案，随时欢迎您回答...

【讨论】：