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
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