Ajustar dinamicamente a largura do campo de entrada para sua entrada

Ajustar dinamicamente a largura de um campo de entrada para corresponder ao comprimento do conteúdo pode melhorar a experiência do usuário e evitar layouts confusos. Embora definir uma largura fixa possa levar a excesso de espaço ou texto cortado, uma abordagem dinâmica garante um campo de entrada visualmente atraente e funcional.

Infelizmente, definir uma largura mínima usando a propriedade min-width do CSS não funciona para campos de entrada. No entanto, os navegadores modernos oferecem uma unidade alternativa chamada "ch" (largura do caractere), que é independente da fonte e é igual à largura do caractere "0" em qualquer fonte.

Para criar uma largura de campo de entrada dinâmica, podemos usar o seguinte código JavaScript:

var input = document.querySelector('input');
input.addEventListener('input', resizeInput);
resizeInput.call(input); // Immediately call the function

function resizeInput() {
  this.style.width = this.value.length   "ch";
}

Este código vincula uma função de redimensionamento ao evento de entrada, que atualiza a largura do campo de entrada para igualar o comprimento do texto em unidades ch. Além disso, podemos definir o estilo do campo de entrada em CSS da seguinte forma:

input{ font-size:1.3em; padding:.5em; }

Isso completa a implementação de uma largura de campo de entrada ajustável dinamicamente que se expande ou contrai automaticamente com base em seu conteúdo.