Ganhei 6 troféus de Bronze http://t.co/jL8dtToX #myps3t Olá pessoal.
Antes de começar o tutorial gostaria de me apresentar já que esse é o primeiro tutorial que posto aqui.
Meu nome é Diego Felix, sou formado em Análise e desenvolvimento de Sistemas e trabalho há quase 3 anos como Web Developer.
Sem mais, vamos ao que interessa!
Hoje ensinarei pra vocês como fazer um contador de caracteres restantes igual ao do twitter.
Para isso iremos utilizar somente xhtml e javascript, para o javascript utilizaremos a biblioteca jQuery.
Então mãos a obra! Vocês podem conferir o contador funcionando aqui.
Estrutura básica xhtml.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Max Characters</title>
<!-- opcional -->
<link rel="stylesheet" href="style.css" media="screen" />
<!-- opcional -->
<script type="text/javascript" src=to"http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h1>Tutorial de máximo de caracteres</h1>
<form action="" method="post">
<label for="content">
<span>
Conteúdo
<span id="content-countdown" title="140">140</span>
</span>
<textarea name="content" id="content" maxlength="140" class="maxlength"></textarea>
</label>
</form>
</body>
</html>
Sem muitos segredos até aqui certo?
Alguns pontos a reparar.
- Temos uma span com o id #content-countdown
- Na span #content-countdown temos uma title com o valor 140.
- Esse valor também é o limite de caracteres do textarea.
- Não é obrigatório colocar o maxlength no textarea, mas também não custa nada.
Agora vamos começar com o jQuery.
As explicações para o código serão inseridas no próprio código para facilitar a leitura.
// quando o documento estiver pronto, faça.
$(function(){
/*
Keyup é um evento que é disparado sempre que o usuário tirou o dedo da tecla.
Ou seja, não queremos fazer nada quando o usuário clica, somente quando ele solta
a tecla.
*/
$(".maxlength").keyup(function(event){
// abaixo algumas variáveis que iremos utilizar.
// pega a span onde esta a quantidade máxima de caracteres.
var target = $("#content-countdown");
// pego pelo atributo title a quantidade maxima permitida.
var max = target.attr('title');
// tamanho da string dentro da textarea.
var len = $(this).val().length;
// quantidade de caracteres restantes dentro da textarea.
var remain = max - len;
// caso a quantidade dentro da textarea seja maior que
// a quantidade maxima.
if(len > max)
{
// abaixo vamos pegar tudo que tiver na string e limitar
// a quantidade de caracteres para o máximo setado.
// isso significa que qualquer coisa que seja maior que
// o máximo será cortado.
var val = $(this).val();
$(this).val(val.substr(0, max));
// setamos o restante para 0.
remain = 0;
}
// atualizamos a quantidade de caracteres restantes.
target.html(remain);
});
});
Espero que o código acima esteja bem comentado para vocês. Resumindo o que está acontecendo, a cada vez que o usuário digita alguma coisa dentro da textarea, eu disparo um evento onde eu verifico a quantidade de caracteres máximos que ele pode digitar, verifico se o que ele digitou atingiu esse máximo, se atingiu eu limito para o máximo e atualizo a quantidade restante, caso contrário eu apenas atualizo a quantidade restante.
Caso vocês queiram, segue abaixo o código css que eu coloquei no exemplo.
body{
font:normal 0.8em "Trebucet MS", Tahoma, Verdana, Arial, sans-serif;
}
form, textarea{
width:300px;
}
label{
display:table;
width:100%;
}
label span.countdown span{
float:right;
}
Você também pode baixar todos os arquivos clicando aqui. 
Um grande abraço à todos e até a próxima.
