Avisar quantos caracteres faltam com JavaScript

Avisar quantos caracteres faltam com JavaScript

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

});

 

 

Está começando e deseja saber o que precisa estudar de HTML e JavaScript? Não deixe de conferir os roteiros de estudo de HTML e JavaScript!. São dezenas de conteúdos para você melhorar suas habilidades.

Roteiro de estudos - HTML e CSS

Roteiro de estudos - Javascript

 

Outros conteudos que podem ser de seu interesse

Compactar arquivos com JavaScript
24/06/2023JAVASCRIPT

Compactar arquivos com JavaScript

Veja como compactar artigos utilizando JavaScript

Saiba mais...
Cursos online para aprender programação
23/01/2022JAVASCRIPT

Cursos online para aprender programação

Uma lista de cursos pagos ou gratuitos para aprender programação

Saiba mais...

Conteúdo sobre banco de dados sem complicação!