Evitar que um textarea supere um número de caracteres permitido

Fazemos um script Javascript para controlar que um textarea de um formulário tenha mais caracteres que os permitidos. Ou seja, que se permita escrever em um textarea até que se alcance uma longitude do texto dada.

Por Miguel Angel Alvarez - Tradução de JML


Publicado em: 13/2/09
Valorize este artigo:
Este script de Javascript é bastante utilizado em muitos websites. 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 permita escrever mais conteúdo no campo textarea.

Vejamos o exemplo em funcionamento para termo 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, iremos comprovar se a quantidade de caracteres que há no textarea é permitida.
  • Se for permitida, não fazemos nada.
  • Se não for permitida, porque estamos superando o número de caracteres que pode conter o textarea, não se deixa escrever mais texto no campo do formulário. Conseguiremos isso colocando o texto que havia antes de se escrever 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 estão escritos. Ademais, quando chegar o 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 conteudo_textarea armazena o conteúdo do campo textarea. Ao princípio está iniciada à cadeia vazia, porque supomos que o textarea 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 veremos a função valida_longitude(). 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){
   conteudo_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 tudo está 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, se trata 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, 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 fique vermelho.

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 tiver passado dos caracteres permitidos, se colocará de cor vermelha, caso contrário, se colocará preto.

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.





Comentários do artigo
Foi enviado 1 comentário ao artigo
1 comentário não revisado
0 comentários revisados

Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato