Contador de caracteres em uma textarea com JavaScript

Como fazer um contador de caracteres em uma textarea com JavaScript, validando a quantidade de caracteres digitados no input e validando

Conteúdo também disponível em vídeo:

Fala programador, beleza? Bora aprender a fazer uma validação de número de caracteres para uma textarea!

A lógica por trás do problema é bem simples, temos que definir uma quantidade máxima aceita

E fazer esta checagem a cada evento do usuário, ou seja, a cada tecla digitada

Caso atinja o máximo de caracteres, vamos simplesmente ignorar esta nova tecla, desta forma limitando o número de caracteres

Veja na prática:

<textarea name="description" id="description"></textarea>

Este será o nosso HTML, uma textarea com um id de description, por meio deste id que vamos selecionar o elemento

Agora o JavaScript:

var desc = document.querySelector("#description");
desc.addEventListener("keypress", function(e) {
    var maxChars = 20;
  inputLength = desc.value.length;
  
  if(inputLength >= maxChars) {
  	e.preventDefault();
  }
    
});

Vamos entrar em detalhes do que está acontecendo aqui

Primeiramente atribuímos o input a uma variável, para podermos adicionar o evento a ele de forma mais fácil

Depois criamos o evento de keypress, que será ativado a cada tecla digitada na nossa textarea

Definimos então um comprimento máximo / quantidade máxima de caracteres na variável maxChars, aqui você deve mudar para a sua necessidade

Depois pegamos a quantidade de caracteres atuais em desc, ou seja, na nossa textarea, por meio da variável inputLength

Checamos em um if se a quantidade atual é maior ou igual ao limite fornecido pela variável maxChars

Caso seja não deixamos o dígito ser escrito no input, utilizando o preventDefault do evento

E desta forma limitamos o input alvo a um máximo de 20 caracteres, e assim o problema está resolvido

Agora você pode adicionar uma validação via HTML para o usuário ver que está no limite já

Conclusão

Neste artigo vimos como criar um contador de caracteres em uma textarea, que valida um máximo de caracteres digitados em um input

Com a mesma lógica podemos inserir uma validação para uma quantidade mínima de caracteres

A ideia central é verificar a quantidade caracteres digitados a cada vez que o usuário tecla

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