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.
- Primeiro criamos o campo de mensagem e o campo do contador:
-
<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>
- Aqui foi criado um campo de texto onde cada tecla pressionada pelo usuário chama uma função chamada “contador”.
- O campo “contador” recebe o tamanho do campo “mensagem”.
- Aqui temos a função em JavaScript:
-
<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> - 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.
- Na linha 5 definimos um limite para o campo mensagem.
- Na linha 6 verificamos se a quantidade de caracteres digitadas é maior ou igual ao limite pré-definido.
- 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.