Você está aqui: Home / programacao / jquery-javascript / limitar text area.html

Limitar Text Area

     

Quem faz sites já deve ter feito algum cadastro onde utilizou um campo textarea onde quiz colocar um limitador do número máximo de caracteres a ser digitados no textarea. Veremos como fazer isso usando jquery e javascript, e além disse também veremos como criar um display que exibe uma contagem regressiva de caracteres que ainda restam para o digitador.

O nosso script que veremos a seguir irá limitar o número de caracteres que o usuário conseguirá digitar da forma convencional, mas lembrem-se que quando se fala em javascript, tudo é burlável, por isso, fazer uma checagem do tamanho dos dados oriundos do textarea no PHP ou ASP antes de mandar salvar no banco, faz-se veementemente aconselhável.

O exemplo abaixo subentende que você já incluiu o pack do jQuery última versão, ok?

function messageSizeController(maxSize,msg,display){
   id = msg;
   msg = $("#"+msg).val();

   if(msg.length > maxSize){
	   msg = msg.substring(0,maxSize);
	   alert("Você excedeu o máximo de " + maxSize + " caracteres\nO texto será reajustado!");
	   $("#"+id).val(msg);
   }

   $("#"+display).html(msg.length + " de "+maxSize+" caracteres");
}

E o formulário web poderia ser algo desse tipo:

<form>
  <textarea id='descritivo' name='descritivo' onkeyup="javascript:messageSizeController(100, 'descritivo', 'display')"></textarea>
  <span id='display'></span>
</form>

A função messageSizeController(100,’descritivo’,'display’) está recebendo três parâmetros, o primeiro é número máximo de caracteres que esse textarea pode ter. O segundo parâmetro é o id do próprio textarea que chama a função, ou seja, onde o script deverá aplicar o limite. Já o terceiro parâmetro da função é o id do objeto onde deverá ser exibido o número de caracteres restantes, um countdown, ou contagem regressiva.

Essa função é bastante usual, com ela você pode limitar várias textareas em uma mesma página, e limitando cada um com um número de caracteres diferentes.

Creio que assim como esta função é útil para mim, tanto que resolvi desenvolvê-la, vai ser também útil para qualquer desenvolvedor web que precise Limitar Textarea em seus projetos e serviços na internet.

Bom, tá aí pessoal, usem a vontade, mas mantenham os créditos, combinado?

See you next time!

Deixe um Comentário

O seu endereço de email não será publicado Campos obrigatórios são marcados *

*

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>