Avisar quantos caracteres faltam com JavaScript

Avise quantos caracteres faltam ao digitar dados em seu formulário

Para aqueles que trabalham com formulários em HTML, os campos de entrada do tipo "texto" possuem uma propriedade chamada "maxlength" que permite limitar a quantidade de caracteres. Isso também se aplica aos campos do tipo "textarea" a partir do HTML5. Limitar a quantidade de caracteres é imporante para evitar erros de gravação na hora de enviar os dados para o banco de dados.

O usuário vai ter uma experiência melhor se você informar qual a quantidade de caracteres que falta para atingir o limite, desta forma, o usuário pode ajustar o texto digitado. 

Neste exemplo, vamos trabalhar com um campo do tipo textarea com o id chamado "texto". Você vai precisar adicionar alguma div ao lado  para informar quantos caracteres faltam, vamos rotular esta div com o id "falta".

 

Para restringir a quantidade de caracteres e avisar o usuário quantos caracteres faltam, você precisa de duas coisas:

1 - Executar uma certa programação quando alguma tecla for pressionada dentro do campo, e

2 - Contar quantos caracteres foram digitados e comparar com o limite.

Vamos criar uma função para agrupar esta programação, e reaproveitar em outros campos. A função vai receber o nome de "contarTexto". Ela vai receber 3 parâmetros

function contarTexto(campo, limite, container) {

//Campo - Nome do campo que vai ser controlado

//Limite - Quantidade de caracteres que o campo deve aceitar

//Container - Nome da DIV que deve exibir quantos caracteres faltam para atingir o limite

 

//Programação a ser inserida

}

Como fazer para executar esta função quando uma tecla for pressionada?

No JavaScript, você pode adicionar "listeners" para determinados elementos. A função do "listener" é executar algum comando quando algum evento ocorrer (ex: Arrastar, clicar, duplo clique, pressionar tecla, entre outros)

Nós vamos ouvir o evento de tecla pressionada. No final da página, vamos inserir o seguinte script:

document.getElementById("texto").addEventListener("keydown", function(){

contarTexto(this, 250, "falta");

});

No código acima selecionamos o elemento com id "texto" e adicionamos um listener para o evento "keydown" (tecla pressionada).  O listener possui dois parâmetros, o nome do evento que ele deve escutar, e a programação que deve ser executada.

Perceba que dentro do "listener", estamos executando a função "contarTexto", mas, o primeiro parâmetro (que é o nome do campo) esta recebendo o valor "this". O "this" faz referência ao próprio elemento, ou seja, um elemento HTML do tipo "input" ou "textarea" com o id "texto"

Para obter a quantidade de caracteres de um campo, você pode fazer da seguinte forma:

var campo = document.getElementById("texto")

var limite = 250;

if (campo.value.length > limite) {

campo.value = campo.value.substring(0, limite);

Quando você informa o nome de um input ou textarea, existe uma propriedade chamada "value", que retorna o conteúdo do campo. Esta propriedade possui outra dentro dela chamada "length", que retorna a quantidade de caracteres.

Com isso, é possivel fazer uma comparação com o valor limite. Quando a quantidade de caracteres do campo for maior que o limite, será executada esta função "substring" dentro do "value" que vai retornar uma certa quantidade de caracteres a partir da esquerda. Ou seja, ele sempre vai ignorar o que ultrapassar o limite.

O código completo fica da seguinte forma:

function contarTexto(campo, limite, container) {

if (campo.value.length > limite) {

campo.value = campo.value.substring(0, limite);

} else {

d = document.getElementById(container);

d.innerHTML = 'Restam ' + (parseInt(limite) - parseInt(campo.value.length));

}

}

document.getElementById("texto").addEventListener("keydown", function(){

contarTexto(this, 250, "falta");

});

 

 

Quer conferir mais dicas sobre JavaScript? Clique aqui e veja mais dicas!