0

Tenho um input em meu sistema onde o usuário deve inserir código (apenas números), porém ele pode colocar vários códigos, e pra separar utiliza ponto e vírgula (;).

Para que funcione eu criei o input como text e coloquei uma função, que é chamada através do event (input), que realiza a seguinte ação:

Input:

<input [disabled]="!selectHierarchy" id="numero" name="pesquisa" type="text" (input)="validaNumber()">

Função:

validaNumber(){
  let input = <HTMLInputElement>document.querySelector("#numero");
  input.value = input.value.replace(/[^0-9\;]/, '');
}

Deu certo, quando digito só aparece número e ponto e vírgula.

Porém se eu copiar um texto, e colar no input, aparece o texto normal. Como fazer essa validação funcionar também quando o usuário cola um texto?

1
  • Já tentou utilizar o evento ngChange? pois a validação só ocorrerá quando houver alterações no valor do input
    – gleidson
    Commented 11/08/2021 às 18:01

1 Resposta 1

0

Consegui resolver!

Eu adicionei o event binding (paste) que chama uma função quando alguém tenta colar algum texto:

<input [disabled]="!selectHierarchy" id="numero" name="pesquisa" type="text" (input)="validaNumber()" (paste)="teste($event)">

Na função eu criei um regex com tudo que não deve ser aceito no input, pego o valor e verifico se há alguma correspondência utilizando o regEx.test():

teste(event: ClipboardEvent){
let reg = /[a-zA-Z!@#$%^&*()_+\-=\[\]{}':"\\|,.<>\/?]/i;
let clipboardData = event.clipboardData;
let pastedText = clipboardData.getData('text');

 if (reg.test(pastedText)){
   event.preventDefault();
   event.cancelBubble = true;
   return false;
 }
}

Se tiver, cancela o evento e não deixa colar o texto.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .