Por defecto, <input> y <textarea> los elementos no cambian de tamaño en función del contenido que contienen. De hecho, no existe una forma simple de HTML o CSS para hacer que hagan eso. Un poco gracioso, ya que parece un caso de uso razonable. Pero claro, hay formas, amigo. Siempre hay formas.
Estaba pensando en esto después de que Remy Sharp escribiera en su blog recientemente en el contexto de inline <input> elementos.
Los elementos que no son de entrada se expanden naturalmente
Me resulta extraño que no haya forma de forzar a un elemento de entrada a imitar este comportamiento, pero lamentablemente.
Podemos hacer que cualquier elemento sea editable y similar a una entrada con el contenteditable atributo:
<span
class="input"
role="textbox"
contenteditable>
99
</span>Ese <span> naturalmente crecerá hasta alcanzar el ancho que necesita para el contenido que contiene. Si fuera un <div> o cualquier otro elemento a nivel de bloque, también se expandiría verticalmente según sea necesario.
Pero, ¿son accesibles los elementos que no son de entrada?
No estoy del todo seguro. Fíjate que puse role="textbox" en el elemento. Esa es solo la mejor suposición basada en algunos documentos.
Incluso si eso es útil …
- ¿Qué pasa con el hecho de que los formularios se pueden enviar con la tecla Intro?
- ¿Qué pasa con la idea de que los datos del formulario a menudo se serializan y se envían, mientras que el código que lo está haciendo probablemente no esté buscando un intervalo?
- ¿Realmente lee lo mismo que una entrada en un lector de pantalla?
- ¿Qué otras cosas hacen las entradas de forma natural en las que no estoy pensando?
Tan atraído como estoy por la idea de que podemos obtener un cambio de tamaño automático de forma gratuita desde el navegador mediante el uso de elementos que no son de entrada, también estoy un poco preocupado por (mi) usabilidad desconocida y el riesgo de accesibilidad.
Cambiar el tamaño de los elementos de entrada reales
Así que digamos que nos quedamos con <input> y <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 colocarlo 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 las á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 la línea. Eso funciona muy bien para texto preformateado, como el 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 línea de JavaScript que es muy inteligente. El 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 usa ese data-* atributo como su 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 hasta el domingo. Veámoslos en los comentarios.
- Eric Bailey me golpeó con algunos pensamientos en la parte superior de su 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.