Bloquear caracteres especiais em input com JavaScript

Neste artigo você vai aprender a como bloquear caracteres especiais em input, ou seja, não permitir caracteres especiais em campos do formulário com JS

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

Fala programador(a), beleza? Bora aprender mais como bloquear caracteres especiais em campos de formulário com JavaScript puro!

A ideia é bem simples para resolver este problema, vamos aplicar uma expressão regular nos caracteres digitados para verificar se é um caractere especial

Veja a aplicação do código:

var input = document.querySelector("#name");
input.addEventListener("keypress", function(e) {
    if(!checkChar(e)) {
  	e.preventDefault();
  }
});
function checkChar(e) {
    var char = String.fromCharCode(e.keyCode);
  
  console.log(char);
    var pattern = '[a-zA-Z0-9]';
    if (char.match(pattern)) {
  	return true;
  }
}

Primeiramente selecionamos o input alvo, que neste exemplo tem o id de name, porém você deve adaptar ao seu projeto

Mapeamos um evento de keypress em cima deste input, para registrar tudo que é digitado no mesmo

E aí aplicamos a função contra cada um destes eventos, onde é feita uma checagem se o dígito é entre a-z maiúsculo e minúsculo ou algum número, esta é a tradução da regex na veriável pattern

Caso seja encontrado um valor que está dentro da regex nos é retornado true, e o evento pode seguir normalmente

Porém checamos no if se o resultado é falso, e aí prevenimos o dígito de ser inserido com o preventDefault

Desta maneira barramos todos os caracteres especiais de serem inseridos nos nossos inputs de formulário

Conclusão

Neste artigo vimos como bloquear caracteres especiais em input com JavaScript

Utilizamos uma expressão regular contra um input, resgatando cada um dos valores digitados

Caso seja um caractere especial, não deixamos o evento prosseguir, utilizando o preventDefault

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