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:
1 2 | 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!