Como não permitir números em um input com JavaScript

Neste artigo você vai aprender a como não permitir números em input com JavaScript, permitindo que o usuário insira apenas letras nos campos

Veja este conteúdo em vídeo também:

Fala programador(a), beleza? Bora aprender mais sobre como limitar um tipo de caracteres em inputs ou textarea com JavaScript!

A nossa abordagem aqui vai ser bem simples, primeiramente precisamos adicionar um evento a cada tecla pressionada no elemento alvo, ou seja, no input ou textarea

O evento que melhor se encaixa é o keypress, onde o mesmo será avaliado a cada tecla pressionada

Depois vamos mapear o keyCode, que é a tecla que o usuário digitou, os números ficam num range de 47 a 58

Caso seja uma destas keys, vamos impedir que o evento ocorra com preventDefault, e então o número não vai aparecer no input

Veja a situação abordada na prática:

var inputNome = document.querySelector("#nome");
nome.addEventListener("keypress", function(e) {
    var keyCode = (e.keyCode ? e.keyCode : e.which);
  
  if (keyCode > 47 && keyCode < 58) {
    e.preventDefault();
  }
});

Nesta situação temos um input com id de #nome, você deve adaptar para os seus inputs do formulário que está adicionando a ação

Na variável keyCode resgatamos qual tecla o usuário pressionou, e fazemos a validação do range acima mencionado no if

Caso entre neste if, temos um dígito sendo inserido pelo usuário

Então utilizamos o preventDefault que impede o dígito de ser inserido no campo, e resolvemos o problema =)

Conclusão

Neste artigo vimos como não permitir números em um input com JavaScript

Resgatamos a tecla que o usuário digitou pelo keyCode

Verificamos se é um número e impedimos o mesmo de ser inserido no input, com a função preventDefault

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