Impedir usuário de colar caracteres especiais com JavaScript

Neste artigo você vai aprender a como impedir usuário de colar caracteres especiais, utilizando JavaScript e seus eventos de DOM

Conteúdo também disponível em vídeo:

Fala programador(a), beleza? Bora aprender mais sobre JavaScript, DOM e bloqueio de certos caracteres.

O ato de colar pode ser resgatado como um evento também, que é o paste

Porém neste caso, vamos precisar esperar um pouco para ver o conteúdo digitado pelo usuário

Já que ele é colado em um input de texto, então vamos utilizar a função de setTimeout para fazer este aguardo

Com uma expressão regular vamos identificar os caracteres especiais e não permitir que eles sejam digitados

Veja o exemplo prático:

<input type="text" name="name" id="name">

Vamos trabalhar com este HTML apenas, pois precisamos somente de um input para concluir o exemplo

Normalmente você terá uma estrutura de formulário HTML mais complexa

Agora veja o código JavaScript:

var input = document.querySelector("#name");

input.addEventListener("paste", function () {
	
    var regex = new RegExp("^[ 0-9a-zA-Z\b]+$");
    var self = this;
    
    setTimeout( function(){
    
        var text = self.value;
        
        if(!regex.test(text)) {             
            self.value = "";
        }
        
    }, 10);

});

Vamos verificar o que acontece neste código, linha a linha

Primeiramente mapeamos o input que queremos prevenir de caracteres especiais, e adicionamos um evento nele, com addEventListener

O evento é o paste, vamos estar observando quando o usuário cola algo neste input

Depois em regex criamos nossa expressão regular, que não permite caracteres especiais e também mapeamos o this em self

Isso será necessário para poder resgatar os dados do input dentro de setTimeout, esta função foi utilizada para poder esperar o texto cair no input e aí sim validarmos

Veja que o tempo imposto é muito pequeno, apenas 10 milissegundos, porém são suficientes

Por fim validamos a expressão regular com o texto colado no input, caso haja algum caractere especial removemos o texto

Fazemos a remoção com a propriedade value, que corresponde ao texto do input

E então o problema está resolvido, o input não aceita mais caracteres especiais!

Conclusão

Neste artigo vimos como impedir usuário de colar caracteres especiais

Utilizamos o evento paste, para mapear a ação de colar no input alvo

Depois passamos o texto do input em uma expressão regular, que valida se ele possui algum caractere inválido

Se positivo, removemos o texto por completo do input

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube