Como não permitir que um caractere seja digitado em um input com JavaScript

Neste artigo você vai aprender como não permitir que um caractere seja digitado em um input ou área de texto com JavaScript puro.

Fala galera, beleza? Bora aprender mais sobre como limitar caracteres com JavaScript!

A ideia é primeiramente mapear, atribuindo a uma variável, o input ou área de texto que o caractere não pode ser digitado

Depois iremos adicionar um evento de keypress – para que seja ativado a cada tecla que for pressionada no textbox

Vamos então identificar a tecla que foi digitada por meio do evento e caso seja algum dígito que queremos evitar nós vamos cancelar a inserção

Veja o código:

const input = document.querySelector("#input");

input.addEventListener("keypress", function(e) {

	if(e.key === ",") {
  	e.preventDefault();
  }
  
});

Neste caso estamos limitando a vírgula de aparecer no input com id de #input, veja que o cancelamento do evento é feito por o método preventDefault

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 118 aulas
• 4 projetos
• 9h 33min

Conhecer formação

Onde o mesmo só é executado após checar se o que foi digitado bate com o que queremos bloquear naquele input ou área de texto

E se você quiser bloquear diversos caracteres, uma melhor alternativa seria inserir os mesmos em um array

E fazer a checagem se o elemento está dentro do array, para depois prosseguir com o bloqueio do evento ou a continuidade do seu código

Com certeza esta abordagem será melhor do que encadear uma série de ifs para cada um dos caracteres que você precisa eliminar deste input

A manutenção e entendimento de código será facilitada por esta ação mais resumida de código

Conclusão

Neste artigo vimos como não permitir que um caractere seja digitado em um input

Primeiramente mapeamos o textbox em uma variável para depois fazer as validações necessárias em cada keypress

Ou seja, cada vez que uma tecla é pressionada em um determinado campo de texto verificamos se a mesma é a que queremos bloquear

Se for, paramos o evento com o método preventDefault

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

Bloqueando vários caracteres de uma vez:

Falei do array ali em cima, então bora ver ele na prática?

A ideia é simples: em vez de um if pra cada caractere, você joga todos os caracteres proibidos dentro de um array

Depois é só perguntar se a tecla digitada está nesse array, usando o método includes

const input = document.querySelector("#input")

input.addEventListener("keypress", function(e) {
if (bloqueados.includes(e.key)) {
e.preventDefault()
}
})

Repara que o resto do código continua igualzinho

A única coisa que mudou foi a checagem, que agora olha a lista inteira de uma vez só

E quando você precisar bloquear mais um caractere, basta adicionar ele no array e seguir a vida, sem mexer na lógica 🙂

E se eu quiser permitir apenas números?

Esse é o caso mais comum de todos: campo de CPF, telefone, CEP, quantidade, por aí vai

Aqui a lógica se inverte: em vez de listar o que é proibido, você define o que é PERMITIDO e bloqueia todo o resto

const input = document.querySelector("#input")

input.addEventListener("keypress", function(e) {
e.preventDefault()
}
})

O test devolve true quando a tecla é um dígito de 0 a 9

Como a gente quer justamente o contrário, o sinal de exclamação na frente inverte a resposta e o preventDefault entra em ação pra tudo que não for número

Mesma receita serve pra "só letras", só trocando o que vai dentro da expressão

Funciona em textarea também?

Funciona, e sem mudar praticamente nada

O evento de keypress não é exclusivo do input, ele também dispara na área de texto

const textarea = document.querySelector("#mensagem")

textarea.addEventListener("keypress", function(e) {
if (bloqueados.includes(e.key)) {
e.preventDefault()
}
})

Única coisa que muda é o elemento que você mapeia na variável lá no começo

A lógica de checar e cancelar é exatamente a mesma =)

Tome cuidado com o Ctrl+V:

Aqui mora a pegadinha que derruba muita gente

O evento de keypress só olha tecla pressionada, então se o usuário colar um texto no campo, o caractere proibido entra numa boa e o seu bloqueio nem fica sabendo

Já me ferrei uma vez por causa disso 😛

Pra fechar essa porta, escute também o evento de paste e cancele quando o conteúdo colado tiver algo da sua lista

input.addEventListener("paste", function(e) {
const texto = e.clipboardData.getData("text")

if (bloqueados.some(c => texto.includes(c))) {
e.preventDefault()
}
})

O some devolve true assim que encontrar UM caractere da lista dentro do texto colado, e aí o preventDefault cancela a colagem inteira

Juntando os dois eventos, o campo fica protegido pelos dois caminhos: digitando e colando

Perguntas frequentes:

Como bloquear mais de um caractere no mesmo input?

Coloque todos os caracteres proibidos em um array e use includes dentro do keypress, chamando preventDefault quando a tecla estiver na lista

Assim você evita encadear vários ifs e a manutenção fica bem mais tranquila

Como deixar o input aceitar somente números?

Inverta a lógica: teste se a tecla é um dígito e bloqueie tudo que não for, com preventDefault dentro do keypress

O bloqueio funciona quando o usuário cola o texto?

Não, porque colar não dispara o keypress

Pra cobrir esse caso, adicione também um listener no evento de paste e cancele a colagem quando o texto trouxer algum caractere da sua lista