Contar e limitar caracteres em textarea

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. ;)

2 ideias sobre “Contar e limitar caracteres em textarea

  1. 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…

  2. 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.

Deixe um Comentário

O seu endereço de email não será publicado Campos obrigatórios são marcados *

*

*

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>