Entradas y áreas de texto de crecimiento automático

De forma predeterminada, los elementos inputy textareano cambian de tamaño según el contenido que contienen. De hecho, no existe ninguna forma sencilla de hacerlo mediante HTML o CSS. Es un poco gracioso, ya que parece un caso de uso razonable. Pero claro, hay maneras, amigo mío. Siempre hay maneras .

Estaba pensando en esto después de que Remy Sharp escribiera en su blog recientemente sobre elloinput en el contexto de los elementos en línea.

Los elementos que no son de entrada se expanden naturalmente

Me resulta extraño que no haya forma de forzar que un elemento de entrada imite este comportamiento, pero, ¡ay!

Podemos hacer que cualquier elemento sea editable y similar a una entrada con el contenteditableatributo:

span     role="textbox"   contenteditable    99/span

Naturalmente, ese spanancho crecerá hasta alcanzar el ancho necesario para el contenido que contiene. Si fuera un divelemento o cualquier otro a nivel de bloque, también se expandiría verticalmente según fuera necesario.

Pero, ¿son accesibles los elementos que no son de entrada?

No estoy del todo seguro. Observe que me puse role="textbox"el elemento. Esa es solo una mejor suposición basada en algunos documentos .

Incluso si eso es útil…

1. ¿Qué pasa con el hecho de que los formularios se pueden enviar con la tecla Intro?
2. ¿Qué pasa con la idea de que los datos del formulario a menudo se serializan y envían, mientras que el código que lo hace probablemente no busca un lapso?
3. ¿ Realmente se lee igual que una entrada en un lector de pantalla?
4. ¿Qué otras cosas ¹ hacen naturalmente las entradas en las que no estoy pensando?

Por muy atraído que me sienta la idea de que podamos cambiar el tamaño automáticamente de forma gratuita desde el navegador mediante el uso de elementos que no son de entrada, también estoy un poco preocupado por (mi) riesgo desconocido de usabilidad y accesibilidad.

Cambiar el tamaño de los elementos de entrada reales

Entonces digamos que nos quedamos con inputy textarea. ¿Podemos hacer que se puedan cambiar de tamaño aunque no sea particularmente natural?

Una idea que tuve es envolver la entrada en un padre en línea relativo y posicionarla absolutamente dentro. Luego, con JavaScript, podríamos sincronizar el valor de entrada con un intervalo oculto dentro de ese contenedor, ampliando el ancho según sea necesario.

Para áreas de texto, una técnica clásica es contar el número de saltos de línea, usarlo para establecer la altura y luego multiplicarlo por la altura de línea. Eso funciona muy bien para texto preformateado, como código, pero no para contenido de formato largo similar a un párrafo.

Aquí están todas estas ideas combinadas.

Otras ideas

Shaw tiene una pequeña frase en JavaScript que es muy inteligente . JavaScript establece un data-*atributo en el elemento igual al valor de la entrada. La entrada se establece dentro de una cuadrícula CSS, donde esa cuadrícula es un pseudoelemento que utiliza ese data-*atributo como contenido. Ese contenido es lo que extiende la cuadrícula al tamaño apropiado según el valor de entrada.

Tus ideas

Sé absolutamente que ustedes, compañeros nerds de la web, han resuelto esto de seis maneras para el domingo. Veámoslos en los comentarios.

1. Eric Bailey me golpeó con algunos pensamientos que se le vienen a la cabeza: (1) No hay un nombre accesible. (2) Probablemente no funcione con el control por voz. (3) Se ignorará en el modo de alto contraste.