JavaScript – Contando e limitando caracteres em um textarea

Olá amigos, boa noite!

Ultimamente tenho recebido alguns e-mails com estas dúvidas, sobre como contar e limitar determinada quantia de caracteres em um textarea, pensando nisso desenvolví 2 funções para resolver de vez este problema!
Vamos lá!
É muito simples, primeiramente no textarea, temos o evento “onkeyup”, ou seja, ao soltarmos uma tecla, chamamos 2 funções:

Temos também 2 elementos “span” que servirão para exibir os resultados referentes a quantidades de caracteres.
A primeira função que chamamos é a mostrarResultado(), e nela passamos como argumentos:

  • O campo onde os caracteres são digitados;
  • O valor máximo de caracteres;
  • O id do elemento onde irei escrever os resultados.
  • No exemplo abaixo, utilizo como exemplo o número máximo de 140 caracteres para serem digitados.

    A propriedade “length” calcula o tamanho do que lhe é determinado, neste caso do elemento textarea, de id “campo”.
    E o que eu faço nesta função toda?
    Se o tamanho do valor que está no campo, ou seja, a quantidade de caracteres for diferente de 0, escrever no elemento “span” o total de caracteres digitados.
    Se for igual a 1, escrever a mesma frase, só que no singular.
    E se ultrapassar 140 caracteres, escrever a mensagem “Limite de caracteres excedido!”.
    Fácil não? Esta função está 100% customizável, apenas mude os argumentos passados a função de acordo com a sua necessidade.

    Agora vamos a função que irá me mostrar quantos caracteres ainda posso digitar, e quando ultrapassar este valor não deixar.
    Para tal façanha, utilizaremos a função contarCaracteres(), e passamos como argumento:

  • Novamente o campo onde os caracteres são digitados;
  • O valor limite de caracteres;
  • O id do elemento onde irei escrever os resultados.
  • Vamos lá:

    Logo na primeira linha eu faço a simples conta de subtração, pego o valor limite, passado via argumentos, e subtraio dele a quantidade digitada, em seguida escrevo o resultado, exibindo quantos ainda restam para digitar.
    E se este valor for maior ou igual ao meu valor limite, escrevo “Opss.. você não pode mais digitar..” e em seguida utilizo o método substr() para me trazer exatamente o valor limite (neste caso 140) no meu campo, fazendo com que não seja permitido digitar mais..
    Esta função está 95% customizável, apenas na linha 6 coloque o id (na propriedade getElementById()) relativo ao campo em que irá ser contado e bloqueado os caracteres.

    Ainda não entendeu o que a função substr() faz?
    Vamos lá, simples..
    Digamos que dá string “Vinicius” você queira que retorne apenas “Vini”.
    Então seria:

    Isto irá me retornar “Vini”!
    Traduzindo ao pé da letra, a função é o seguinte:
    substr(caracter inicial, quantidade que quero apartir do inicial)
    Lembrando que sempre o primeiro caracter é 0!

    Veja o exemplo do contador, e pegue o código fonte, e se surgirem dúvidas, por favor, entre em contato!
    Forte abraço e boa semana!