Posts Tagged limite textarea

Contador de caracteres em ASP.

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>
  7. 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.
  8. Na linha 5 definimos um limite para o campo mensagem.
  9. Na linha 6 verificamos se a quantidade de caracteres digitadas é maior ou igual ao limite pré-definido.
  10. 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.

Comentários (4)