post #4478
Contador de Caracteres em Tempo Real para Campos Textarea com JavaScript
Publicado em: 21/02/2024 / Atualizado em: 21/02/2024
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:
Link Direto
Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link direto abaixo. Basta copiar.
bruno.art.br/?p=4478
ID de Referência: 4478
Sugira uma publicação
Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.