Entradas y áreas de texto de crecimiento automático

 

 

 


Índice
  1. Los elementos que no son de entrada se expanden naturalmente
  2. Pero, ¿son accesibles los elementos que no son de entrada?
  3. Cambiar el tamaño de los elementos de entrada reales
  4. Otras ideas
  5. Tus ideas

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. Mejores Páginas de Contactos | Opiniones y Análisis 2023

 

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.





SUSCRÍBETE A NUESTRO BOLETÍN 

No te pierdas de nuestro contenido ni de ninguna de nuestras guías para que puedas avanzar en los juegos que más te gustan.










Al suscribirte, aceptas nuestra política de privacidad y nuestros términos de servicio.






Tal vez te puede interesar:

  1. La innovación no puede mantener la Web rápida
  2. Rendimiento web ultrarrápido
  3. Tabla de contenidos fijos con estados activos de desplazamiento
  4. “cambiar tamaño: ninguno;” en áreas de texto es una mala experiencia de usuario

Entradas y áreas de texto de crecimiento automático

Entradas y áreas de texto de crecimiento automático

Los elementos que no son de entrada se expanden naturalmentePero, ¿son accesibles los elementos que no son de entrada?Cambiar el tamaño de los elementos de e

programar

es

https://pseint.es/static/images/programar-entradas-y-areas-de-texto-de-crecimiento-automatico-1356-0.jpg

2024-06-13

 

Entradas y áreas de texto de crecimiento automático
Entradas y áreas de texto de crecimiento automático

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Update cookies preferences