CriarWeb.com > Manuais > Workshop de Javascript

O desenho deste script foi motivado pela necessidade de fazer a típica caixa para enviar mensagens SMS pela Internet. O tamanho máximo de uma mensagem SMS de celular é de 160 caracteres, com o qual é muito útil que a própria página lhe informe sobre o número de caracteres que levam escritos na mensagem, para que o interessado não passe do máximo permitido.

O funcionamento é muito simples de entender, mas de qualquer forma, podemos ver o script em funcionamento para saber exatamente o que propomos.

O formulário

A página apresentará um formulário com dois campos. O primeiro com o textarea onde o usuário escreverá a mensagem e o segundo, um campo de texto onde mostraremos em todo momento os caracteres escritos.

O único detalhe para ter em conta, relacionado com Javascript é o par de eventos que temos definidos dentro do campo textarea, que servem para chamar à função que realiza a conta dos caracteres no momento em que o usuário pressiona ou solta as teclas. Teoricamente, utiliza-se o evento onKeyDown para definir as ações a realizar quando se apertar a tecla e onKeyUp, para definir ações a executar quando se soltar a tecla apertada.

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

O script que conta caracteres

Com o formulário e os dois eventos introduzidos temos tudo que é necessário para que se contem -e recontem- os caracteres cada vez que o visitante, situado sobre o textarea, clica sobre as teclas, ou seja, cada vez que se escreve texto no textarea. Agora simplesmente nos falta definir a função que se encarrega de realizar a conta propriamente dita e situa-la no outro campo de texto do formulário.

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

Talvez muitos tenham se surpreendido com a simplicidade do script, mas é que realmente não faz falta mais.

A propriedade value do textarea contém o texto escrito e por sua vez, a propriedade length salva o número de caracteres de tal texto. Assim, document.forms[0].texto.value.length equivale ao número de caracteres introduzidos dentro do textarea. Este valor se atribui ao conteúdo do campo de texto do formulário onde salvamos o número de caracteres, mediante a propriedade value do campo: document.forms[0].caracteres.value.

Com tudo isso, se mostrará no campo de texto o número de caracteres do textarea. Pode-se ver por exemplo em uma página a parte.