Como limitar Textarea em Java Script

O campo textarea é muito utilizado para que os usuários insiram textos mais longos, como comentários ou descrições. No entanto, muitas vezes é necessário limitar o número de caracteres que os usuários podem inserir para evitar textos muito extensos. Neste post, aprenda como limitar Textarea em Java Script.

1. Adicionar limite com maxlength (HTML)

Uma forma simples de limitar o número de caracteres em um textarea é usando o atributo maxlength diretamente no HTML. Isso impede que o usuário digite mais caracteres do que o permitido.

Exemplo:

<form>
    <label for="comentario">Comentário:</label>
    <textarea id="comentario" maxlength="100" placeholder="Digite até 100 caracteres..."></textarea>
</form>

maxlength: Define o número máximo de caracteres permitidos. Neste exemplo, o campo aceita até 100 caracteres.

Embora o atributo maxlength seja fácil de usar, ele não fornece feedback em tempo real sobre quantos caracteres ainda podem ser inseridos. Vamos ver como adicionar essa funcionalidade com JavaScript.

2. Limitar caracteres com JavaScript e mostrar feedback

Para dar uma experiência mais rica ao usuário, podemos usar JavaScript para contar os caracteres enquanto o usuário digita e exibir quantos caracteres ainda restam. Vamos criar um exemplo em que o usuário tem um limite de 150 caracteres e é avisado quando atinge o limite.

Exemplo:

<form>
    <label for="descricao">Descrição:</label>
    <textarea id="descricao" rows="4" placeholder="Digite sua descrição..." oninput="contarCaracteres(this, 150)"></textarea>
    <p id="contador">Restam <span id="caracteresRestantes">150</span> caracteres.</p>
</form>

<script>
function contarCaracteres(textarea, limite) {
    const textoAtual = textarea.value.length;
    const caracteresRestantes = limite - textoAtual;
    const contador = document.getElementById('caracteresRestantes');

    // Atualiza o número de caracteres restantes
    contador.textContent = caracteresRestantes;

    // Impede que o usuário digite mais do que o limite
    if (caracteresRestantes < 0) {
        textarea.value = textarea.value.substring(0, limite);
        contador.textContent = 0;
    }
}
</script>

Como funciona:

• O evento oninput chama a função contarCaracteres() sempre que o usuário digitar algo.
  
  
• A função compara o número de caracteres digitados com o limite e atualiza o elemento que mostra quantos caracteres restam.
  
  
• Se o usuário tentar digitar mais caracteres que o permitido, o script automaticamente limita o valor dentro do textarea ao número máximo de caracteres.

3. Desabilitar a inserção de texto excedente em tempo real

Outra abordagem é impedir que o usuário digite mais caracteres do que o limite diretamente, sem necessidade de cortar o texto depois que ele já foi inserido. Neste caso, o campo textarea não aceitará nenhum caractere adicional quando o limite for atingido.

Exemplo:

<form>
    <label for="mensagem">Mensagem:</label>
    <textarea id="mensagem" rows="4" placeholder="Digite sua mensagem..." oninput="limitarCaracteres(this, 200)"></textarea>
    <p id="mensagem-contador">Restam <span id="mensagem-restante">200</span> caracteres.</p>
</form>

<script>
function limitarCaracteres(textarea, limite) {
    const contador = document.getElementById('mensagem-restante');
    const textoAtual = textarea.value.length;

    if (textoAtual > limite) {
        textarea.value = textarea.value.slice(0, limite);
    }

    // Atualiza o contador de caracteres restantes
    contador.textContent = limite - textarea.value.length;
}
</script>

Como funciona:

• Se o número de caracteres ultrapassar o limite, o valor é imediatamente truncado para o máximo permitido.
  
  
• O número de caracteres restantes é atualizado constantemente.

4. Exibindo mensagens de aviso quando o limite é atingido

Além de mostrar quantos caracteres faltam, você pode exibir uma mensagem de aviso quando o usuário atinge o limite máximo. Isso melhora ainda mais a experiência, deixando claro que não é possível inserir mais texto.

Exemplo:

<form>
    <label for="feedback">Feedback:</label>
    <textarea id="feedback" rows="4" oninput="verificarLimite(this, 120)" placeholder="Deixe seu feedback..."></textarea>
    <p id="feedback-contador">Restam <span id="feedback-restante">120</span> caracteres.</p>
    <p id="aviso" style="color: red; display: none;">Você atingiu o limite de caracteres!</p>
</form>

<script>
function verificarLimite(textarea, limite) {
    const contador = document.getElementById('feedback-restante');
    const aviso = document.getElementById('aviso');
    const textoAtual = textarea.value.length;

    if (textoAtual >= limite) {
        textarea.value = textarea.value.slice(0, limite);
        aviso.style.display = 'block';  // Exibe o aviso
    } else {
        aviso.style.display = 'none';  // Oculta o aviso
    }

    // Atualiza o contador de caracteres restantes
    contador.textContent = limite - textarea.value.length;
}
</script>

Exibição do aviso: Quando o usuário atinge o limite de caracteres, uma mensagem de aviso é exibida em vermelho. Caso contrário, a mensagem permanece oculta.

5. Limitar caracteres e evitar colar texto excedente

Em alguns casos, o usuário pode colar grandes blocos de texto que excedem o limite permitido. Podemos evitar esse comportamento também com uma simples verificação na função de input.

Exemplo:

<form>
    <label for="texto">Texto:</label>
    <textarea id="texto" rows="4" oninput="limitarTexto(this, 100)" placeholder="Digite até 100 caracteres..."></textarea>
    <p id="texto-contador">Restam <span id="texto-restante">100</span> caracteres.</p>
</form>

<script>
function limitarTexto(textarea, limite) {
    const contador = document.getElementById('texto-restante');
    const textoAtual = textarea.value;

    if (textoAtual.length > limite) {
        textarea.value = textoAtual.slice(0, limite);  // Trunca o texto se exceder o limite
    }

    contador.textContent = limite - textarea.value.length;
}
</script>

Como funciona: Se o texto colado exceder o limite, ele é truncado instantaneamente para que fique dentro dos limites permitidos.

Outro exemplo prático

Limitar a quantidade de caracteres digitados em um Textarea pode ser um recurso importante quando precisamos restringir a quantidade de informação a ser enviada do cliente ao servidor. Neste post veja como limitar Textarea em Java Script.

  function limitaTextarea(valor)
  {
  
  //define a quantidade de caracteres permitida
  quantidade = 300;
  
  //verifica a quantidade de caracteres da string passada como parâmetro
  total = valor.length;
  
  //Se o tamanho da string for menor ou igual a quantidade definida como limite...
  if(total <= quantidade) { 
  
   //calcula a diferença entre o limite de caracteres definido e o tamanho da string   
    resto = quantidade - total; 
    
    //Mostra os caracteres restantes 
    document.getElementById('contador').innerHTML = resto;
    
    } else {
     
     //Impede a digitação de novos caracteres
     document.getElementById('texto').value = valor.substr(0, quantidade);
    }
   }

Formulário HTML:

<font color="#666666" size=1>faltam <span id="contador">300</span> caracteres.</font>
<textarea name="duvidasSugestoes" rows="3" cols="47" onkeyup="limitaTextarea(this.value)" 
onKeyPress="this.value = Trim( this.value )" id="texto" /></textarea>

Limitar o número de caracteres em um campo textarea com JavaScript é simples e pode melhorar a experiência do usuário ao fornecer feedback em tempo real sobre o número de caracteres restantes.

Seja para restringir a entrada de texto em um formulário de contato, feedback ou qualquer outro tipo de texto, essas soluções oferecem controle e precisão.

Dúvidas ou sugestões? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits

Tags: textarea javascript