Como é uma dúvida de muitos, posto aqui hoje um simples código de como limitar um textarea.
Para aqueles que são mais avançados, sugiro que use o plugin do jQuery, o jQuery Limit plugin.
Vamos ao que interessa…
Passo 1
Adicione esse código entre a tag “head” do seu site.
Esse é o nosso script, se não tem muita noção do que está ali embaixo, melhor modificar apenas o total de caracteres, hehe
function limitaTextarea(valor) {
quantidade = 250;
total = valor.length;
if(total <= quantidade) {
resto = quantidade- total;
document.getElementById('contador').innerHTML = resto;
} else {
document.getElementById('texto').value = valor.substr(0, quantidade);
}
}
Passo 2
Aqui, entre as tags “SPAN” à o total de caracteres novamente..
<textarea onkeyup="limitaTextarea(this.value)" id="texto"></textarea> <br /> Campo (caracteres restantes: <span id="contador">250</span>)
É, acho que é só isso! hehe
Coloquei aqui este e outro exemplo de um limitador de textarea.
Façam bom aproveito. Até mais.
Analisando o seu código do exemplo(especialmente a parte da barrinha ^^, achei interessante), vi que se a pessoa der um Ctrl C, Ctrl V no seu código, e mudar o máximo, ele irá bugar…
var max = 250; /* Total de caracteres */
var ancho = 300;
function contaTextarea(valor) {
var barrinha = document.getElementById(“barrinha”);
if (valor.value.length < max) {
barrinha.style.backgroundColor = "#FFFFFF";
barrinha.style.backgroundImage = "url(http://www.pedrocaires.com.br/blog/extras/images/barrinha001.jpg)"; /* Aqui fica o outro endereço da barrinha */
barrinha.style.color = "#000000";
var pos = ancho-parseInt((ancho*parseInt(valor.value.length))/250); /* Total de caracteres */
barrinha.style.backgroundPosition = "-"+pos+"px 0px";
} else {
barrinha.style.backgroundColor = "#BB0000";
barrinha.style.backgroundImage = "url()";
barrinha.style.color = "#FFFFFF";
}
barrinha.innerHTML = "("+valor.value.length+" / "+max+")";
}
Exatamente nesta linha:
var pos = ancho-parseInt((ancho*parseInt(valor.value.length))/250); /* Total de caracteres */
Ai ele faz uma conta(creio eu ^^), e divide por 250, que é o máximo de caracteres, porém, se eu modifico lá em cima o max p/ 300, e não modifico essa linha, ele irá ficar errado, com um máximo de caracteres no textarea, e nesse efeito ele estará com outro…
Então, acho que o correto mesmo seria colocar assim:
var pos = ancho-parseInt((ancho*parseInt(valor.value.length))/max); /* Total de caracteres */
Não manjo muito de JS puro, acostumei com o JQUERY, sei fazer alguns efeitos e tals com JQUERY, então, se eu estiver errado, me corrija…
Realmente Rafael,
Na verdade isso nem é erro do código, foi erro meu, esqueci de colocar ali.
Mas na verdade, já fiz mudanças nesse código ai, pois contem erros em navegadores e talz.. só não atualizei aqui no blog ainda, mas pretendo atualiza-lo depois. (:
Volte sempre, abraço.