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.

Neste artigo vamos ver como limitar a quantidade de caracteres com JavaScript.

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.  Usamos o lenght para contar 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");

});