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

Question

而不是利用 jQuery或 JavaScript文件类型的组件文件之外的函数 ts , 需要在将任何特殊字符粘贴到文本框后修剪/删除/限制调用 TypeScript 内部的函数仅组件，将其作为抽象函数粘贴到文本框后需要反射(reflect)相同

唯一允许的特殊字符是:

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

这是下面显示的完整代码片段


🚀StackBlitz

HTML

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

组件.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;
}

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

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

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

Answer 1

🚀StackBlitz

通过使用 意外地找到了解决方案event.preventDefault();
此方法取消默认 onPaste()方法返回 bool 值而不是替换 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();
    }
}

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