20.02.2025

Limitando o Comprimento da Entrada em Textarea com JavaScript, Sem jQuery

Resposta Rápida

Para limitar o número de caracteres que podem ser inseridos em um textarea, você pode usar o atributo maxlength e o evento input. Vamos ver um exemplo de um manipulador de eventos para isso:

// Encontrando o elemento textarea no DOM
const textarea = document.querySelector('textarea');
// Definindo o manipulador de eventos input
textarea.addEventListener('input', () => {
  // Cortando o texto se seu comprimento exceder o máximo permitido
  textarea.value = textarea.value.slice(0, 100);
});

Esse manipulador vai acompanhar quaisquer mudanças no campo e automaticamente cortar o texto para o comprimento especificado, se necessário.

Análise Aprofundada

Interface do Usuário Fluida com Conteúdo Dinâmico

No desenvolvimento web moderno, onde o conteúdo pode ser carregado dinamicamente, a delegação de eventos é a melhor opção:

// Acompanhando eventos no nível do documento
document.addEventListener('input', (event) => {
  if (event.target.tagName === 'TEXTAREA' && event.target.maxLength > 0) {
    // Cortando o texto ao comprimento permitido
    event.target.value = event.target.value.slice(0, event.target.maxLength);
  }
});

Respondendo a Colagens de Texto

Os usuários podem colar texto da área de transferência, o que pode exceder o limite definido. Neste caso, o código pode ser assim:

textarea.addEventListener('paste', (event) => {
  // Dando ao JS tempo para processar o texto colado
  setTimeout(() => {
    // Cortando o texto excedente
    textarea.value = textarea.value.slice(0, textarea.maxLength);
  }, 0);
});

Aqui, setTimeout garante a ordem correta das operações: primeiro colando o texto e, em seguida, cortando-o.

Suportando Navegadores Antigos

Se um navegador não suportar o atributo maxlength, você pode usar a seguinte abordagem:

window.onload = function() {
  var textareas = document.getElementsByTagName('TEXTAREA');
  for (var i = 0; i < textareas.length; i++) {
    if (textareas[i].getAttribute('maxlength')) {
      textareas[i].onkeyup = textareas[i].onblur = enforceMaxLength;
    }
  }

  function enforceMaxLength(event) {
    var target = event.target;
    var maxLength = parseInt(target.getAttribute('maxlength'));
    if (target.value.length > maxLength) {
      // Cortando o texto e informando o usuário
      target.value = target.value.substring(0, maxLength);
      alert('Limite de caracteres excedido!');
    }
  }
};

Isso resolverá o problema até mesmo para versões desatualizadas de navegadores.

Visualização

Vamos tomar, por exemplo, um elemento “cerca de texto” com um limite de caracteres:

<textarea id="hedge" maxlength="10"></textarea>

O JavaScript aqui age como um jardineiro cuidando dessa “cerca”:

const garden = document.getElementById('hedge');
garden.addEventListener('input', () => {
  if (hedge.value.length > 10) {
    garden.value = garden.value.substring(0, 10); // Cortando para um tamanho permitido!
  }
});

O texto no textarea é limitado a dez caracteres e sempre ficará organizado.

Controle Ainda Mais Refinado sobre a Entrada

Para controlar a entrada do teclado, você pode usar o evento keydown:

textarea.addEventListener('keydown', (event) => {
  // Bloqueando a entrada de caracteres adicionais quando o limite é alcançado
  if (textarea.value.length >= textarea.maxLength && ![8, 46].includes(event.keyCode) && !event.metaKey && !event.ctrlKey) {
    event.preventDefault();
  }
});

Trabalhando com jQuery

Se você preferir usar jQuery, a tarefa se torna mais simples:

$('textarea[maxlength]').on('input', function() {
  // jQuery simplifica a manipulação do DOM
  var maxLength = parseInt($(this).attr('maxlength'));
  $(this).val($(this).val().substring(0, maxLength));
});

Aqui, não importa se os campos são adicionados dinamicamente ou não.

Feedback Considerado para o Usuário

É sempre importante fornecer feedback ao usuário e fazê-lo de forma delicada:

textarea.onblur = function() {
  if (this.value.length > this.maxLength) {
    // Destacando o campo com um erro
    this.classList.add('error');
    // Pedindo desculpas sinceras pelo inconveniente
    alert('Desculpe, o texto está muito longo!');
  }
};

Recursos Úteis

1. <textarea>: Elemento Textarea - HTML: Linguagem de Marcação HiperTexto | MDN — informações detalhadas sobre <textarea> e o atributo maxlength.
2. Atributo Maxlength em Textarea HTML — guia sobre como usar o atributo maxlength em <textarea>.
3. Definindo Maxlength em Textarea HTML - Stack Overflow — discussão sobre como limitar o comprimento máximo em <textarea>.
4. Propriedades e métodos de formulários — explicação detalhada sobre como trabalhar com elementos de formulários, incluindo limite de caracteres em <textarea>.
5. Dificuldade com jQuery e evento keydown - Stack Overflow — discussão sobre comportamentos relacionados à limitação da entrada de caracteres em campos de formulários.
6. Tag <textarea> HTML 5 — guia prático sobre como usar <textarea>, incluindo todos os atributos no HTML5.

Video

Navigation