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

Se liga num detalhe que pega muita gente: o keypress só dispara quando a tecla é digitada

Se o usuário colar com Ctrl+V, arrastar o texto pro campo ou o navegador preencher automático, o número passa batido

Pra fechar esse buraco a gente escuta o evento input, que roda sempre que o valor do campo muda, não importa como

Aí é só limpar os dígitos com um replace:

inputNome.addEventListener("input", function(e) { });

Essa versão pega digitação, colagem e ainda se comporta melhor no celular, onde o keyCode costuma dar dor de cabeça

Repara que o replace de cima tira só os números de 0 a 9

Ou seja, letra com acento, espaço e cedilha continuam liberados, que é justo o que um campo de nome costuma precisar

Se você quiser deixar SÓ letra e espaço, é só inverter a regra e remover tudo que não for letra:

Por que o número ainda aparece quando eu colo o texto?

Porque o keypress só roda quando você digita tecla por tecla, ele não vê a colagem

Pra pegar o Ctrl+V use o evento input com o replace, como mostramos acima

Como faço a mesma coisa num textarea?

O código é o mesmo, muda só o seletor: aponta o querySelector pro id do seu textarea e adiciona o listener nele

Dá pra bloquear número só com HTML?

O atributo pattern ajuda a validar no envio do formulário, mas ele não impede o usuário de digitar em tempo real, pra isso você ainda precisa do JavaScript