15.11.2024

Elemento de Entrada com Redimensionamento Automático pela Largura do Valor

Resposta Rápida

Para ajustar automaticamente o tamanho do <input type="text"> para se ajustar ao texto inserido, você pode usar o seguinte código:

document.getElementById('input').oninput = function() {
  this.style.width = ((this.value.length + 1) * 8) + 'px';
};

O script funciona com o elemento <input id="input">, ajustando a largura do campo de entrada proporcionalmente ao número de caracteres digitados. A largura assumida de um caractere é multiplicada pelo número '8', que pode ser ajustado de acordo com o tamanho da fonte utilizada.

Método Usando JavaScript

const input = document.querySelector('#input');
input.oninput = function() {
  const textWidth = getTextWidth(this.value, window.getComputedStyle(this).font);
  this.style.width = (textWidth + 4) + 'px';
};

Visualização

Vamos visualizar esse processo como uma área expansiva (🏞️), capaz de se moldar com base na tamanho do objeto colocado sobre ela:

Antes: [🏞️......] (Tamanho inicial do campo de entrada)
Agora:  [🏞️🎵🎶🎵🎶] (Tamanho se adapta ao conteúdo inserido)

<input type="text" oninput="this.style.width = ((this.value.length + 1) * 8) + 'px';">

Assim como uma paisagem em mudança, o campo de entrada reage ao tamanho do conteúdo e se adapta de acordo. 🚀

Considerando Fonte, Padding e Bordas

Considerando Estilos

Ao fazer cálculos, não se esqueça de considerar o padding e as bordas do elemento:

input.oninput = function() {
  const style = window.getComputedStyle(this);
  const padding = parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
  const border = parseFloat(style.borderLeftWidth) + parseFloat(style.borderRightWidth);
  this.style.width = (getTextWidth(this.value, style.font) + padding + border + 4) + 'px';
};

Ajustando o Tamanho da Fonte

Com espaço limitado na página, você pode ajustar o tamanho da fonte para maximizar o uso do espaço disponível:

const minWidth = 100;
const maxWidth = 600;

input.oninput = function() {
   this.style.width = Math.max(minWidth, Math.min(maxWidth, (getTextWidth(this.value, style.font) + padding + border + 4))) + 'px';
   this.style.fontSize = (this.offsetWidth >= maxWidth ? '75%' : '100%');
};

Peculiaridades do CSS e Ocultando Divs

Usando Largura em Percentual com CSS

Os entusiastas de CSS podem usar o seguinte código:

.input-wrapper {
  width: 100%;
}
.input-wrapper input {
  width: 100%;
}

Envolva o <input> em um div com largura definida em porcentagens. O elemento irá expandir ou contrair de acordo com o tamanho do div.

Truque da Div Invisível

Você pode copiar os estilos do input para uma div invisível assim:

input.oninput = function() {
  const ghostDiv = document.getElementById('ghost');
  ghostDiv.innerHTML = this.value.replace(/ /g, " ");

  const newWidth = ghostDiv.offsetWidth + 4;
  this.style.width = newWidth + 'px';
};

<div id="ghost" style="display: none; white-space: pre;"></div>

Uso Geral de Plugins e Atributo Contenteditable

Usando Plugin jQuery para Redimensionamento Automático

Plugins jQuery, como Autosize, podem ser úteis, especialmente se você já está usando jQuery.

Uso Inteligente de Contenteditable

Como alternativa, você pode considerar usar um span contenteditable:

<span contenteditable="true" oninput="resizeSpan(this)"></span>

No entanto, não se esqueça de filtrar os dados inseridos para evitar ataques XSS em sua aplicação.

Ajustes Finais e Equilíbrio

Considerando Espaços Traços

Se você considerar espaços finais, poderá evitar desajustes visuais:

ghostDiv.innerHTML = this.value.replace(/ /g, " ") + " ";

Estilizando o Placeholder

Estilize o placeholder de forma a harmonizar com o texto ativo e garantir uma experiência suave para o usuário:

input::placeholder {
  color: #ccc;
  opacity: 1; /* Já parece melhor no Firefox */
}

Estilizando o Foco e Peculiaridades do Navegador

Use :focus-visible para uma melhor experiência do usuário durante a entrada.

E esteja preparado para peculiaridades de diferentes navegadores — eles podem apresentar variações inesperadas nas renderizações e nos cálculos de margem!

Recursos Úteis

1. MDN Web Docs: <input type="text"> — Uma descrição detalhada do elemento HTML para entrada de texto.
2. Stack Overflow: Existe um plugin jQuery para campos de texto que crescem automaticamente? — Discussão e exemplos de campos de texto que redimensionam automaticamente.
3. JSFiddle: Sandbox de Código — Uma plataforma para testar e demonstrar código em HTML, CSS e JavaScript, incluindo demonstrações de campos de texto com redimensionamento automático.
4. Autosize — Um plugin jQuery para expandir automaticamente campos de texto.
5. Tutorial no DigitalOcean — Um guia passo-a-passo sobre como implementar campos de texto que redimensionam automaticamente no framework Angular.

Video

Navigation