Este script de Javascript é bastante utilizado em muitos web sites. Trata-se de controlar o tamanho do texto que se escreve em um textarea para evitar que os caracteres escritos superem os permitidos. O controle dos caracteres escritos se faz com Javascript, dinamicamente no lado do cliente, de modo que quando o usuário chega à longitude permitida, não se permite escrever mais conteúdo no campo textarea.

Vejamos o exemplo em funcionamento para termos uma idéia exata do objetivo deste artigo.

O exemplo é simples. Simplesmente vamos definir um número de caracteres permitidos. Com cada letra que escreva o usuário vamos comprovar se a quantidade de caracteres que há no textarea é permitida.

• Se for permitida, não fazemos nada.
• Se não for permitida, caso estivermos passando o número de caracteres que pode conter o textarea, não se deixa escrever mais no campo do formulário. Isso o conseguiremos colocando o texto que havia antes que se escrevesse esse caractere não permitido.

Adicionalmente, vamos levar a conta dos caracteres escritos em um campo de texto, para que o usuário possa visualizar os caracteres que levam escritos. Ademais, quando se chegue ao limite de caracteres permitidos se colocará em vermelho o campo de texto que conta os caracteres do textarea.

Este exercício está realizado a partir de outro exercício que publicamos anteriormente em CriarWeb.com, que seria bom ler: Contar caracteres escritos em um textarea

O exercício tem duas partes, o script Javascript e o formulário HTML. Comecemos vendo o formulário:

<form action="#" method="post">
<table>
<tr>
   <td>Texto:</td>
   <td><textarea cols="40" rows="5" name="texto" onKeyDown="valida_longitude()" onKeyUp="valida_longitude()"></textarea></td>
</tr>
<tr>
   <td>Caracteres:</td>
   <td><input type="text" name=caracteres size=4></td>
</tr>
</table>
</form>

Não tem nenhuma complicação. Porém, há que prestar atenção aos eventos do textarea, que são onKeyDown e onKeyUp, que se desatam quando o usuário aperta ou solta teclas do teclado. Em ambos eventos se chama à função javascript valida_longitude(), que se encarregará de fazer todo o trabalho.

Vejamos agora o Javascript:

<script>
conteudo_textarea = ""
num_caracteres_permitidos = 10

function valida_longitude(){
   num_caracteres = document.forms[0].texto.value.length

   if (num_caracteres > num_caracteres_permitidos){
      document.forms[0].texto.value = conteudo_textarea
   }else{
      conteudo_textarea = document.forms[0].texto.value
   }

   if (num_caracteres >= num_caracteres_permitidos){
      document.forms[0].caracteres.style.color="#ff0000";
   }else{
      document.forms[0].caracteres.style.color="#000000";
   }

   conta()
}
function conta(){
   document.forms[0].caracteres.value=document.forms[0].texto.value.length
}
</script>

Primeiro se definem duas variáveis:

conteudo_textarea = ""
num_caracteres_permitidos = 10

A variável conteúdo_textarea armazena o conteúdo do campo textarea. À princípio está iniciada à cadeia vazia, porque o textarea supomos que está vazio.

Temos também uma variável num_caracteres_permitidos, que armazena o número de caracteres que se permite escrever no textarea. Neste caso o definimos como 10.

Agora colocamos a função valida_longitud(). O primeiro que fazemos é averiguar a quantidade de caracteres escritos, e o armazenamos na variável num_caracteres.

num_caracteres = document.forms[0].texto.value.length

Logo fazemos a parte mais importante deste script: Vemos se os caracteres escritos são menores ou iguais que os permitidos, para agir em conseqüência.

if (num_caracteres <= num_caracteres_permitidos){
   contenido_textarea = document.forms[0].texto.value
}else{
   document.forms[0].texto.value = conteudo_textarea
}

Se os caracteres escritos são menores ou iguais que os caracteres permitidos, então está tudo bem. O que fazemos é atualizar a variável que mantém o conteúdo do textarea, conteudo_textarea, introduzindo o que há no textarea atualmente, que é de um tamanho permitido.

Se o escrito no textarea for maior que o permitido, trata-se de uma situação que não se pode aprovar. Então, simplesmente escrevemos no textarea o que há na variável conteudo_textarea, que era o que havia antes e que estava validado em longitude corretamente.

Isso é tudo, é simples! Porém, agora vamos fazer uma pequena melhora para que quando o textarea chegue à longitude máxima permitida o campo de texto que leva a conta dos caracteres se coloque de cor vermelha.

if (num_caracteres >= num_caracteres_permitidos){
   document.forms[0].caracteres.style.color="#ff0000";
}else{
   document.forms[0].caracteres.style.color="#000000";
}

Como se pode ver, simplesmente se comprova de novo se o número de caracteres é maior ou igual que os permitidos. Então, sendo assim, se atualiza a propriedade style.color do campo de texto "caracteres", que mostra o número de caracteres escritos. Com style.color se pode modificar a propriedade de estilo CSS que define a cor do texto do campo. Se houvesse chegado aos caracteres permitidos, se colocaria cor vermelha, caso contrário, se colocaria cor preta.

Por último, fazemos uma chamada à função conta(), que já havíamos criado no artigo anterior:

function conta(){
   document.forms[0].caracteres.value=document.forms[0].texto.value.length
}

Esta função simplesmente atualiza o campo de texto, colocando o número de caracteres escritos no textarea.

Podemos ver de novo o exemplo em funcionamento.