Ajustar dinámicamente el ancho del campo de entrada a su entrada

Ajustar dinámicamente el ancho de un campo de entrada para que coincida con la longitud de su contenido puede mejorar la experiencia del usuario y Evite diseños desordenados. Si bien establecer un ancho fijo puede generar exceso de espacio o texto cortado, un enfoque dinámico garantiza un campo de entrada visualmente atractivo y funcional.

Desafortunadamente, establecer un ancho mínimo usando la propiedad min-width de CSS no funciona para campos de entrada. Sin embargo, los navegadores modernos ofrecen una unidad alternativa llamada "ch" (ancho de carácter), que es independiente de la fuente y equivale al ancho del carácter "0" en cualquier fuente.

Para crear un ancho de campo de entrada dinámico, podemos usar el siguiente 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 una función de cambio de tamaño al evento de entrada, que actualiza el ancho del campo de entrada para igualar la longitud del texto en unidades ch. Además, podemos definir el estilo del campo de entrada en CSS de la siguiente manera:

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

Esto completa la implementación de un ancho de campo de entrada ajustable dinámicamente que se expande o contrae automáticamente según su contenido.