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