jQuery Plugin: Characters lenght
Postado por: Pedro Rogério emVocê por um acaso já viu aqueles contadores de caracteres restantes em formulários e não teve a menor idéia ou saco pra fazer aquilo, pois bem, procurando no google achei um plugin para jQuery que faz isso de uma forma bem simples, mas sua aplicação é somente a inputs, não sendo aplicado a textareas:
jQuery.fn.counter = function() {
$(this).each(function() {
var max = $(this).attr('maxlength');
var val = $(this).attr('value');
var cur = 0;
if(val) // value="", or no value at all will cause an error
cur = val.length;
var left = max-cur;
$(this).after("<div class='counter'>"
+ left.toString()+"</div>");
// You can use something like this to align the
// counter to the right of the input field.
var c = $(this).next(".counter");
c.width(40);
c.css("position","relative");
c.css("top",-$(this).height()-8);
c.css("left",$(this).width()+8);
c.css("background","yellow");
$(this).keyup(function(i) {
var max = $(this).attr('maxlength');
var val = $(this).attr('value');
var cur = 0;
if(val)
cur = val.length;
var left = max-cur;
$(this).next(".counter").text(left.toString());
return this;
});
});
return this;
}
Sua utilização é muito simples, basta indicar o id ou a classe do input que deseja indicar a contagem de caracteres no bloco de inicialização do jQuery juntamente com a função counter():
$(document).ready(function() {
$(".word_count").counter();
});
É muito importante você definir o atributo maxlenght para o campo input, senão a contagem não é efetuada. Veja nesse exemplo o plugin em ação. Efetuei uma simples alteração no plugin, adicionando o texto “caracteres restantes” e quando o número restante de caracteres chega a 3, a cor do texto é alterada para alertar o usuário:
jQuery.fn.counter = function() {
$(this).each(function() {
var max = $(this).attr('maxlength');
var val = $(this).attr('value');
var cur = 0;
if(val) //value="", or no value at all will cause an error
cur = val.length;
var left = max-cur;
$(this).after("<div class='counter'>" + left.toString() + " caracteres restantes" + "</div>");
$(this).keyup(function(i) {
var max = $(this).attr('maxlength');
var val = $(this).attr('value');
var cur = 0;
if(val)
cur = val.length;
var left = max-cur;
$(this).next(".counter").text(left.toString() + " caracteres restantes");
if(left < = 3){
$('.counter').css('color', '#ff0000');
} else {
$('.counter').css('color', '#666666');
}
return this;
});
});
return this;
}
A forma de utilização continua a mesma, vejam agora o 2º exemplo. Críticas e sugestões são bem vindas.
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o Pinceladas da Web também escreve para o CSS no Lanche, blog voltado ao desenvolvimento front-end.
Como sempre o Pedro Rogério destruindo parabéns meu velho e quero ver o Sr lançar seu livro hein rs !
Muito legal! E mais uma dica para guardar usando o JQuery.
Bom, eu realmente não gostei do plugin, acho que o principal, que são as textareas ele não atendeu.
Bom, vou acabar pegando essa idéia e modificando um pouco para criar outro plugin, ai te aviso!
falows
Opa, desculpe o comentário duplicado,
mas gostaria que você desse uma olhada no plugin que eu criei: http://igorvieira.com/blog/animate-to-class
Vê o que vc acha!
té mais!
Realmente… sem possibilidade de usar em textareas fica inutil… alias um plugin com tudo isso de codigo pra fazer o mesmo que um simples document.getElementById(‘campo’).value.length() no onKeyUp…
Opa Pedro,
Acompanho seu blog já algum tempo e resolvi hoje postar um link que tem muito haver com seu post e também que a galera está falando…
E uma função para caracteres em textareas:
http://www.sigswitch.com/2008/07/textarea-maxlength-with-jquery/
porém, não sei o motivo mais não consegui utiliza-la… espero que seja util e possa ajudar alguem!
Forte abraço!!!
Valeu pela dica Rômulo.
Ta doido. É necessário jQuery para fazer um contador de caracteres?
Cuidado para uso demasiado de frameworks… Podem acabar programando em jQuery e não em JS hein.
Abraços..
Boa dica de qualquer forma.
Pra funcionar com textarea apenas troque o maxlenght por rows e depois defina a altura do textarea no css. Se fizer isso vai ficar identico ao do Twitter, exibindo o valor negativo, ou seja, o quanto se caracteres que você passou do permitido…
Espero ter ajudado, abraços!
A lógica é simples: maxlenght é um atributo do elemento input e não de textarea, então já que você quer um textarea no lugar do input, basta colocar um atributo que pertença ao elemento textarea.
To achando que falei besteira, mas funfo :)
Adaptei para meu uso… super simples! Para usar em textarea, é só passar o valor que seria de maxlenght, pela funçao:
$(‘.contatexto’).count(200);
Vejam que eu to passando o valor através da variavel “m”:
jQuery.fn.counter = function(m) {
$(this).each(function() {
var max = m;
var val = $(this).attr(‘value’);
var cur = 0;
if(val) //value=”", or no value at all will cause an error
cur = val.length;
var left = max-cur;
$(this).after(“” + left.toString() + ” caracteres restantes” + “”);
$(this).keyup(function(i) {
var max = m;
var val = $(this).attr(‘value’);
var cur = 0;
if(val)
cur = val.length;
var left = max-cur;
$(this).next(“.counter”).text(left.toString() + ” caracteres restantes”);
if(left <= 3){
$('.counter').css('color', '#ff0000');
} else {
$('.counter').css('color', '#666666');
}
return this;
});
});
return this;
}
olá Rogério
tem um erro nesta linha:
if(left < = 3){
o correto seria:
if(left <= 3){