Bom dia, nesse post vou mostrar como fazer um contador e limitar o usuário a digitar x números de caracteres em um campo de texto.

Utilizaremos JavaScript para a validação do campo.

1. Primeiro criamos o campo de mensagem e o campo do contador:

2. <label>Mensagem:<br>
   <textarea onKeyUp="javascript:contador();" name="mensagem" cols="30" rows="10"></textarea>
   </label>
   <p>Máximo 20 caracteres.</p>
   <p>Contador:    <label>
   <input name="contador" type="text" value="0" size="6" >
   </label> </p>

3. Aqui foi criado um campo de texto onde cada tecla pressionada pelo usuário chama uma função chamada “contador”.
4. O campo “contador” recebe o tamanho do campo “mensagem”.
5. Aqui temos a função em JavaScript:

6. <script>
   function contador(){
   var vlr_msg = document.getElementById("mensagem");
   var vlr_cont = document.getElementById("contador");
   vlr_cont.value = vlr_msg.value.length;
   var limite = 20; if (vlr_msg.value.length >= limite) {
   vlr_msg.value = vlr_msg.value.substring(0, limite-1);
   }
   }
   </script>

8. Nãoé tão complicada, na linha 2 e 3, definimos as variaveis, na linha 4 defino que o valor (“value”) do contador recebe o tamanho (“value.length”) do campo mensagem.
9. Na linha 5 definimos um limite para o campo mensagem.
10. Na linha 6 verificamos se a quantidade de caracteres digitadas é maior ou igual ao limite pré-definido.
11. Se a condição for verdadeira, a função não deixa que o texto seja maior que o limite (“substring(0, limite-1)”).

Veja o exemplo AQUI.

Até mais.