Contador de Caracteres em Tempo Real para Campos Textarea com JavaScript - Bruno Devx - BR Criativus

post #4478

Contador de Caracteres em Tempo Real para Campos Textarea com JavaScript

Publicado em: 21/02/2024 / Atualizado em: 21/02/2024

Categorias: BlogJavaScript (JS)JS

Este tutorial demonstra como implementar um controle eficaz de limite de caracteres em campos textarea utilizando JavaScript, garantindo que os usuários não excedam o número máximo permitido de caracteres durante a digitação.

<textarea id="meuTextarea" maxlength="100"></textarea>
<div id="contador"></div>

<script>
// Obter o elemento textarea e o elemento para mostrar o contador
var textarea = document.getElementById('meuTextarea');
var contador = document.getElementById('contador');

// Atualizar o contador inicialmente
contador.innerHTML = "0 / 100";

// Adicionar um ouvinte de evento para o 'input'
textarea.addEventListener('input', function() {
    var textoAtual = textarea.value;
    var comprimentoAtual = textoAtual.length;

    // Atualizar o texto do contador
    contador.innerHTML = comprimentoAtual + " / 100";

    // Se desejar forçar o limite sem usar o atributo maxlength, você pode usar o código abaixo
    // if(comprimentoAtual > 100) {
    //     // Cortar o texto para o limite e atualizar o valor do textarea
    //     textarea.value = textoAtual.substr(0, 100);
    // }
});
</script>

O código fornece uma solução interativa ao atualizar em tempo real um contador que mostra quantos caracteres foram digitados em relação ao limite estabelecido, melhorando a experiência do usuário ao fornecer feedback visual imediato.

Através de um simples ouvinte de eventos, o exemplo oferece uma forma prática de manter a entrada de dados dentro dos parâmetros desejados, sendo uma adição valiosa para qualquer formulário web que necessite de restrições de comprimento de texto.

Publicações recomendadas:



Sugira uma publicação

Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.

Clique aqui e entre em contato