Olá amigos, boa noite!

Ultimamente tenho recebido alguns e-mails com estas dúvidas, sobre como contar e limitar determinada quantia de caracteres em um textarea, pensando nisso desenvolví 2 funções para resolver de vez este problema!
Vamos lá!
É muito simples, primeiramente no textarea, temos o evento “onkeyup”, ou seja, ao soltarmos uma tecla, chamamos 2 funções:

1
2
3

<textarea cols="45" id="campo" rows="5" onkeyup="mostrarResultado(this.value,140,'spcontando');contarCaracteres(this.value,140,'sprestante')"></textarea><br />
<span id="spcontando" style="font-family:Georgia;">Ainda não temos nada digitado..</span><br />
<span id="sprestante" style="font-family:Georgia;"></span>

Temos também 2 elementos “span” que servirão para exibir os resultados referentes a quantidades de caracteres.
A primeira função que chamamos é a mostrarResultado(), e nela passamos como argumentos:

No exemplo abaixo, utilizo como exemplo o número máximo de 140 caracteres para serem digitados.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function mostrarResultado(box,num_max,campospan){
	var contagem_carac = box.length;
	if (contagem_carac != 0){
		document.getElementById(campospan).innerHTML = contagem_carac + " caracteres digitados";
		if (contagem_carac == 1){
			document.getElementById(campospan).innerHTML = contagem_carac + " caracter digitado";
		}
		if (contagem_carac >= num_max){
			document.getElementById(campospan).innerHTML = "Limite de caracteres excedido!";
		}
	}else{
		document.getElementById(campospan).innerHTML = "Ainda não temos nada digitado..";
	}
}

A propriedade “length” calcula o tamanho do que lhe é determinado, neste caso do elemento textarea, de id “campo”.
E o que eu faço nesta função toda?
Se o tamanho do valor que está no campo, ou seja, a quantidade de caracteres for diferente de 0, escrever no elemento “span” o total de caracteres digitados.
Se for igual a 1, escrever a mesma frase, só que no singular.
E se ultrapassar 140 caracteres, escrever a mensagem “Limite de caracteres excedido!”.
Fácil não? Esta função está 100% customizável, apenas mude os argumentos passados a função de acordo com a sua necessidade.

Agora vamos a função que irá me mostrar quantos caracteres ainda posso digitar, e quando ultrapassar este valor não deixar.
Para tal façanha, utilizaremos a função contarCaracteres(), e passamos como argumento:

Vamos lá:

1
2
3
4
5
6
7
8

function contarCaracteres(box,valor,campospan){
	var conta = valor - box.length;
	document.getElementById(campospan).innerHTML = "Você ainda pode digitar " + conta + " caracteres";
	if(box.length >= valor){
		document.getElementById(campospan).innerHTML = "Opss.. você não pode mais digitar..";
		document.getElementById("campo").value = document.getElementById("campo").value.substr(0,valor);
	}	
}

Logo na primeira linha eu faço a simples conta de subtração, pego o valor limite, passado via argumentos, e subtraio dele a quantidade digitada, em seguida escrevo o resultado, exibindo quantos ainda restam para digitar.
E se este valor for maior ou igual ao meu valor limite, escrevo “Opss.. você não pode mais digitar..” e em seguida utilizo o método substr() para me trazer exatamente o valor limite (neste caso 140) no meu campo, fazendo com que não seja permitido digitar mais..
Esta função está 95% customizável, apenas na linha 6 coloque o id (na propriedade getElementById()) relativo ao campo em que irá ser contado e bloqueado os caracteres.

Ainda não entendeu o que a função substr() faz?
Vamos lá, simples..
Digamos que dá string “Vinicius” você queira que retorne apenas “Vini”.
Então seria:

var string = "Vinicius";
var resultado = string.substr(0,4);

Isto irá me retornar “Vini”!
Traduzindo ao pé da letra, a função é o seguinte:
substr(caracter inicial, quantidade que quero apartir do inicial)
Lembrando que sempre o primeiro caracter é 0!

Veja o exemplo do contador, e pegue o código fonte, e se surgirem dúvidas, por favor, entre em contato!
Forte abraço e boa semana!

Gostou do Artigo? Então leia mais:

• Flex: Comunicação entre a Aplicação e o Navegador (3)
• Palestra: Web Designers X Javascript (1)