Redação ForumWeb Equipe de desenvolvimento do ForumWeb.com.br, responsável pelas dicas e downloads do site.
Site do autor: http://www.forumweb.com.br
O artigo de hoje é bem simples, irei mostrar como construir um contador de caracteres restantes, semelhante ao mostrado no Twitter, usando jQuery.
Primeiro o HTML que usaremos de exemplo:
<!doctype html>
<html>
<head>
</head>
<body>
<div class='container' >
<h2>What's happening?</h2>
<textarea cols='50' rows='5' id='status'></textarea>
<div id="counter"></div>
<button id="sendButton">Send</button>
</div>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type='text/javascript'>
</script>
</body>
</html>
var limit = 140;
$(function () {
$('#sendButton').attr("disabled", true);
$('#counter').text(limit);
$('#status').bind(
'keyup', function () {
var inputText = $(this).val();
var length = inputText.length;
var remaining = limit - length;
$('#counter').text(remaining);
var couldSend = !(remaining > 0 && remaining <= limit);
$('#sendButton').attr("disabled", couldSend);
});
$('#sendButton').bind(
'click', function () {
alert("Message was sent");
});
});
Fonte/Autor: Elemar Dev ( http://elemarjr.net/ )
Comente e interaja!