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.
1 comentário revisado:
