limitar caracteres em textarea

Iniciando a série “Diego e as madrugadas de ódio“:

Outro dia minha mãe precisava enviar um texto pelo site de sua faculdade, num campo textarea.

Do nada ela me chama e pergunta como ver a quantidade de caracteres “nesse maldito word novo”. Me aproximo e procuramos como fazer (acho essa nova disposição muito boa, mas ainda me perco). Foi uma caçada, mas achamos.

Por curiosidade, ela precisava contar os caracteres pois o site restringia a resposta a 2500 caracteres.

Espero, com muita fé, que existisse algum código server-side avisando o aluno que sua resposta estava grande de mais, pois a interface era simplesmente o textarea e um texto estático avisando do limite, mas sem informar o quanto já estava escrito.

Deveriam fazer alguma coisa que contasse direto no site!…  Será que é tão difícil?

Sexta Feira, meia noite…

Sem nada melhor para fazer Por vontade de resolver o problema, saquei o Google e meu pouco conhecimento de JavaScript e fui a batalha. O resultado, imagino eu, está legal e funcional.

Veja o exemplo do textarea restrito aqui

Quero programar!

Não vou explicar o CSS – Ele é perfumaria. Você pode vê-lo com um exibir-código fonte e colar num editor qualquer.

Lógica:

Quando a página for re-carregada com um F5, quando o usuário pressionar uma tecla e enquanto ela estiver pressionada precisamos atualizar o contador.

Vou usar uma função chamada contar, com dois parâmetros:

  1. oq estou contando?
  2. qual objeto devo atualizar?

Para acessar a função, usaremos eventos do javascript, que estão disponíveis nos ‘objetos’ do HTML.

Para cuidar do F5, agimos diretamente no body ONLOAD

<body onload=”contar(‘textarea‘,’texto’)”>

Para os outros 2 eventos (que são basicamente de teclado) vamos agir diretamente no textarea:

<textarea name=”textarea” cols=”45″ id=”textarea onkeypress=”contar(‘textarea‘,’texto’)” onkeyup=”contar(‘textarea‘,’texto’)”></textarea>

O keyup serve para contar o caractere final (quando soltamos a tecla) e o keypress o que digitarmos enquanto seguramos uma tecla.

Perceba que a função é preenchida com o ID do textarea. “texto” é uma div que temos abaixo do form:

<div id=”texto“>[ 0 / 2500 ]</div>

Disparamos os eventos para a função, vamos construí-la. Eu fiz no próprio HTML, logo abaixo do title, mas é recomendado que você use um arquivo externo .js.

<title>Untitled Document</title>

<script type=”text/javascript”>

function contar(oq,qual)
{
var num;

//abaixo: descobrimos quantos caracteres temos no “oq”

num = document.getElementById(oq).value.length;

if(num >= 2500)
{
//se for maior ou igual a 2500, apagamos o excesso (se houver)
//e avisamos o usuário

document.getElementById(oq).value = document.getElementById(oq).value.substring(0,2500);
//re ajusta a variável
num = document.getElementById(oq).value.length;
//avisa o usuário
document.getElementById(qual).innerHTML = ‘[ <strong>’+num+'</strong> / 2500 ] – <span class=”aviso”>PSIT! O limite de 2500 caracteres foi atingido.</span>’;
}

else
{
//apenas atualizamos o numero, ainda está no limite
document.getElementById(qual).innerHTML = ‘[ ‘+num+’ / 2500 ]’;
}
}

</script>

Oxi. Pequeno e funcional.

Bônus:

  • Get Element By Id é uma função do javascript que te fornece dados dos objetos HTML, sendo guiada por um ID.
  • sobre innerHTML: é uma maneira rápida de se re-escrever HTML. Não é o recomendado (pelo que vi na WEB) pois você perde algumas “camadas” de HTML. Mas como é uma simples DIV, sem nenhum elemento, não achei que arrancaria o braço de alguém se usada.

É issae. Qualquer coisa (código errado, sugestão de melhoria etc) basta dar um aviso.

Cya!

(btw: “madrugadas de ódio” pois rolaram alguns socos na parede e mordidas no dedo quando o código se comportou estranho :)