25.11.2024

Crescimento Dinâmico de Campos de Entrada HTML: Uma Solução CSS Sem JavaScript

Resposta Rápida

Para ajustar dinamicamente o tamanho de um campo de texto à medida que novos caracteres são inseridos, você pode usar JavaScript para atualizar o atributo size:

document.querySelector('input[type="text"]').oninput = function() {
  this.size = Math.max(this.value.length, 1);
};

O evento oninput permite que o tamanho do campo de entrada se adapte ao conteúdo digitado, enquanto definir um valor mínimo de size como 1 garante que o campo não colapse para zero quando todo o texto for removido.

Adicione Estilo e Elegância com CSS

JavaScript é uma ferramenta eficaz, mas o CSS também pode ser útil, especialmente em casos simples.

contenteditable - Evite Complicações Desnecessárias

O atributo contenteditable em um elemento div permite a criação de um campo de texto que aumenta automaticamente à medida que o texto é inserido. No entanto, é necessário ter cuidado, pois essa funcionalidade pode levar à injeção de HTML.

div[contenteditable="true"] {
  display: inline-block;
  min-width: 50px;
  max-width: 200px;
  border: 1px solid #ccc;
}

<div contenteditable="true"></div>

Opção com um Elemento Invisível

Um elemento invisível pode ser usado para medir a largura do texto e ajustar o tamanho do campo de texto de acordo.

function resizeInput(input) {
  var tmp = document.createElement("span");
  tmp.className = "hidden";
  tmp.innerHTML = input.value.replace(/&/g, "&amp;").replace(/</g, "&lt;")
                             .replace(/>/g, "&gt;");
  document.body.appendChild(tmp);
  input.style.width = tmp.offsetWidth + "px";
  document.body.removeChild(tmp);
}

document.querySelector('input[type="text"]').oninput = function() {
  resizeInput(this);
};

Preste atenção ao estilo e garanta que o elemento oculto permaneça invisível.

Garanta uma Interação Ideal do Usuário

A pseudo-classe :focus do CSS pode ser utilizada para criar um efeito interativo quando o campo de entrada é ativado.

input[type="text"]:focus {
  border-color: #4b9efa;
}

Consistência Entre Navegadores

Use getComputedStyle ou currentStyle para IE para garantir consistência na renderização entre diferentes navegadores.

function getInputWidth(input) {
  if (input.currentStyle) {
    return input.currentStyle.width;
  } else if (window.getComputedStyle) {
    return window.getComputedStyle(input, null).width;
  }
}

Elegância e Suavidade com Atraso de Resposta

Para uma experiência de redimensionamento mais suave, é ideal utilizar a função setTimeout com um pequeno atraso.

var resizeDelay;

document.querySelector('input[type="text"]').onkeydown = function() {
  clearTimeout(resizeDelay);
  resizeDelay = setTimeout(function() {
    resizeInput(this);
  }.bind(this), 200);
};

jQuery com Estilo de Sofisticação Refinada

jQuery oferece um método bastante simples para redimensionar o campo de entrada de texto:

$('input[type="text"]').on('input', function() {
  $(this).css('width', $(this).val().length + 'ch');
});

O tamanho do campo será ajustado de acordo com a largura aproximada dos caracteres inseridos.

Insights de Líderes da Indústria - SoundCloud

As técnicas utilizadas no campo de entrada de tags no SoundCloud demonstram um alto nível de execução para campos dinâmicos que se adaptam ao texto inserido e ao tamanho da tela.

Visualização

O aumento de um campo de texto pode ser visualizado como um balão que se infla com a nova entrada de texto:

| Número de Caracteres Inseridos | Visualização   |
| ------------------------------- | ---------------|
| 1-10                            | 🎈             |
| 11-20                           | 🎈🔜           |
| 21-30                           | 🎈🔜📏         |
| 31+                             | 🎈🔜📏🌬️        |

Trabalhando com o Atributo 'size'

O atributo size pode ser ajustado diretamente usando JavaScript e consultas de mídia CSS para adaptar o campo a diferentes condições de uso.

window.onresize = function() {
  var inputFields = document.querySelectorAll('input[type="text"]');
  inputFields.forEach(function(input) {
    // Atualizar o tamanho do campo de entrada com base na largura da janela.
  });
};

O Quadro Geral - Design de Formulários

Lembre-se, seu campo de entrada é apenas uma parte de um todo maior que representa um formulário, e o design geral deve ser harmonioso.

Recursos Úteis

1. O Truque Mais Limpo para Textareas de Crescimento Automático | CSS-Tricks - segredos para criar campos de texto universais.
2. <input>: O Elemento de Entrada (Entrada de Formulário) - HTML: HyperText Markup Language | MDN - um guia detalhado para trabalhar com o elemento <input>.
3. Como Criar Autocompletar em Campo de Entrada - instruções para construir uma função de autocompletar.
4. javascript - Existe um plugin jQuery para campos de texto de crescimento automático? - Stack Overflow - discussões e recomendações para criar campos que se expandem automaticamente.
5. Padrão HTML - detalhes sobre como trabalhar com formulários em HTML.
6. javascript - Campo de Texto que Expande Automaticamente - Stack Overflow - experiências na implementação de campos de texto que se expandem automaticamente.

Video

Navigation