Обрезка специальных символов при вставке в текстовое поле только из Angular 2+ - PullRequest
Новая
       18

Обрезка специальных символов при вставке в текстовое поле только из Angular 2+

1 голос
/ 02 апреля 2020

Вместо использования функций jQuery или JavaScript вне файла компонента типа файла ts необходимо обрезать / удалять / ограничивать любой из специальных символов после вставки его в текстовое поле от вызова функции внутри TypeScript только компонент и то же самое необходимо отразить после вставки его в текстовое поле в виде абстрактной функции

Допустимы только специальные символы:

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

Вот полные фрагменты кода, показанные ниже

taStackBlitz

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

Результаты в специальных символах по-прежнему останутся в текстовом поле после вставки из буфера обмена. Но не значение trimmedText, вызываемое из onPaste()

Тот же код выше должен быть изменен таким образом, чтобы при вставке любых символов из буфера обмена в текстовое поле. Сохраняя только разрешенные специальные символы, а остальные должны быть удалены из текстового поля

Как мы сможем добиться этого, удаляя / обрезая только специальные символы при вставке в текстовое поле? Это должно быть достигнуто путем использования встроенных функций jQuery или JavaScript только внутри TypeScript. Но не за пределами TypeScript, т. Е. Путем вызова любых функций из <script> или с помощью .js файла

1 Ответ

0 голосов
/ 11 апреля 2020

taStackBlitz

Удивительно нашел решение, используя 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();
    }
}

Если вы найдете какое-либо другое решение, кроме приведенного выше, вы всегда можете ответить ...

...