Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

walmir.silva

[Resolvido] Contador TEXTAREA com JQuery

Por , em Javascript

Recommended Posts

walmir.silva    0

walmir.silva
Postado

Fiz esse simples contador de caracteres de um campo "textarea", espero que gostem...

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[url="http://www.w3.org/TR/html4/loose.dtd"]http://www.w3.org/TR/html4/loose.dtd[/url]">
<html>
<head>
   <title> Contador de caracteres Textarea JQuery - Walmir Silva </title>
 <!-- Chama o arquivo externo jquery. -->
 <script src="app.js/jquery.js" type='text/javascript' language="javascript"></script>
 <script type='text/javascript'>
 /**
  * Executa a função
  */
 $(document).ready(function() {
  /**
   * O evento keyup dispara quando uma tecla do teclado é liberado.
   */
  $("#Msg").keyup(function (event) {
   /**
    * Quando o evento keyup é acionado almenta a largura e altura da textarea
    * mudando sua propriedade css
    */
   $("#Msg").css({width: "342px",
         height: "100px"}); 
   /**
    * Obtem o valor da textarea
    */
   $Msg = $(this).val();
   
   /**
    * Aqui você define o número máximo de caracteres
    */
   var maxText     = 10;
   
   /**
    * Obtem a quantidade de caracteres
    */
   var numChar = $Msg.length;
   
   /**
    * "Exibe" na div somando "um a um" a quantidade de caracteres digitados
    */
   $("#MsgCount").text(numChar);
   
   /**
    * Testa se o total de caracteres é inferior ao permitido
    * Mudando a cor da fonte do div para azul
    */
   if ( numChar < maxText )
   {
    $("#MsgCount").css("color","#0000ff");
   }
   else
   {
    /**
     * Caso chegue no limite alerta
     */
    if ( numChar == maxText)
    {
     alert("Limite de caracteres excedido!\n So e permitido no máximo: " + numChar + " Caracteres");
    }
    else if ( numChar > maxText)
    {
     /**
      * Apos o alerta se for precionado a tecla diferente da backspace do teclado
      * disabilita a textarea e "Exibe" na div o teste "Desabilitado" com a cor vermelha
      */
     if (event.keyCode != 8)
     {
      $("#Msg").attr("disabled","disabled");
      $("#MsgCount").text("Desabilitado").css("color","#ff0000");
     }
    }
   }
  });
 });
 </script>
</head>
<body>
<table>
 <tr>
  <td>Contagem de caracteres textarea com JQuery</td>
 </tr>
 <tr>
  <td>
   <textarea id="Msg" style="width: 250px; height: 30px;"></textarea>
  </td>
 </tr>
 <tr>
  <td><div id="MsgCount"></div></td>
 </tr>
</table>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito