Programação

Contador e limitador de Caracteres no Textarea – jQuery

Salve salve galáxia, hoje ensinarei vocês como inserir no seu site/blog, um Contador e limitador de Caracteres no Textarea usando jQuery. Mas para que serve? Você pode ter no seu/site blog um textarea com nome de resumo e esse campo pode ter no máximo 350 caracteres, então será exibido a quantidade de caracteres restantes parar atingir o máximo.

Veja aqui o exemplo

Como inserir um Contador e limitador de Caracteres no Textarea com jQuery

Passo 1: O jQuery

Vamos inserir o jQuery na nossa página e você pode colocar entre as tags ou no rodapé do seu site (forma recomendada). Veja abaixo que estamos usando uma biblioteca jQuery versão 1.8 e esta sendo carregada direto da API do Google. Caso você já esteja chamando o jQuery na sua página, ignore essa etapa, caso você precise, veja esse post sobre conflito de jQuery.

HTML

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

Passo 2: o HTML

Bom, conforme o exemplo, vamos criar uma área de texto onde o máximo de caracteres será 350, e o código ficará mais ou menos assim:

<p>
<label>Resumo</label>
<textarea cols="150" rows="5" maxlenght="350" name="resumo" id="resumo" value=""/></textarea>
<!-- EXIBE A QUANTIDADE DE CARACTERES RESTANTES -->
<span id="resta"> </span> Caracteres Restantes
</p>

Repare que no código acima, no textarea usamos o name e o id com nomenclatura de resumo. Já no span usamos o id resta para exibir a quantidade de caracteres restantes para atingir o máximo que o campo permite. Vamos para o próximo passo.

Passo 3: O script

Você deve adicionar esse código, também dentro das tags do seu site. Perceba que vamos usar os id´s do textarea e do span no script abaixo que vai contar e limitar os caracteres do textarea.

// MAXIMO DE CARACTERES NO CAMPO REQUISITOS NA ABA DE CLASSIFICADOS
var $j = jQuery.noConflict();
// Use jQuery com a variavel $j(...)
$j(document).ready(function(){
$j('#resumo').keyup(function() {
var len = this.value.length;
if (len &gt;= 350) { //VERIFICA SE TEM MAIS DE 350 CARACTERES
this.value = this.value.substring(0, 350);
}
$j('#resta').text(350 - len); //EXIBE OS CARACTERES RESTANTES
});
});

É isso, dependendo da sua necessidade você pode usar um input text pra limitar e exibir a quantidade de caracteres restantes do seu campo de texto.

Clique aqui e veja o exemplo
Clique aqui e veja o código completo no GitHub
Clique aqui e faça download do arquivo do exemplo.

Pronto, você já tem um Contador e limitador de Caracteres no Textarea com jQuery no seu site. E você, o que achou do tutorial? Comente.

Se o post te ajudou curte a página, não custa nada e me incentiva a continuar escrevendo.
Posts recomendados
Comentários

    Envie seu comentário.

    Seu email não será publicado