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.

4 Comentários »

  1. Charles disse

    Olá!
    Informo que faltou no seu código o ID dos elementos denominados como MENSAGEM E CONTADOR.

    Bem legal esse contador….

    obs: Aconselharia mudar o título para contador de caracteres em java script visto que “ASP” só tem mesmo a extesão do arquivo de exmplo que você colocou aki, pq no código msm nao tem nada de asp nem msm ! hehehe….

    valeu!!!

  2. RPinheiro disse

    Prezado,
    Como posso entrar em contato para possivelmente contratar seus serviços?

  3. Henrique disse

    Legal, mas seria bom se funcionasse no Firefox.

  4. Cristina disse

    Muito legal esse código, mas se uso dentro de um formulário não funciona. Tem como resolver? Se puder dar uma dica agradeço.

RSS feed para comentários neste post · URI do TrackBack

Deixe um comentário