widgets make gui ejemplo javascript widget

javascript - make - Buscando el Ultimate Resizing Textarea



Estoy deseando proporcionar un control de tamaño de área de texto para los usuarios. He probado esto y he visto otras implementaciones, pero parece que no puedo encontrar una que cumpla con todos mis requisitos. Específicamente quiero un control que:

  • Funciona en IE6, IE7, IE8 en Windows y Firefox 3 y 3.5 en Windows y OS X cuando la página se presenta en modo compatible con los estándares (es decir, no en modo peculiar).
  • No desordena la pila de deshacer búfer / deshacer. Este es un problema particularmente desagradable con IE: agregar nodos, eliminar nodos y algunas otras operaciones DOM restablecerá el búfer de entrada, lo que significa que si una implementación se basa en estas técnicas, un deshacer no se comportará como lo hace en un control de área de texto estándar. No he podido encontrar mucha información sobre este error a excepción de esta nota . Implementaciones como el complemento de crecimiento automático de jQuery sufren este problema: intente deshacer los cambios en IE y compare cómo funciona esto con un área de texto estándar. He agregado una página de ejemplo que muestra este problema a JSBin.
  • Tiene una altura máxima más allá de la cual el control no puede crecer.
  • Se contrae adecuadamente cuando se borra el contenido.
  • No parpadea ni actúa de forma extraña al pulsar las teclas. Por ejemplo, el control de JQuery Auto Growing Textarea se comporta de forma extraña, al menos en IE7, cuando el control ha crecido más allá de su tamaño inicial.
  • No requiere que el control use una fuente de ancho de banda fijo / monoespacio.

Lo más cercano que he visto a algo que funciona de esta manera es el campo de actualización de estado de Facebook, que se implementa como un elemento div editable de contenido, pero tengo algunas reservas sobre el uso de dicho elemento porque usar un div significa:

  • Necesita un estilo explícito del borde, lo que significa que podríamos terminar con un borde que se vea diferente a un área de texto nativa.
  • ¿Necesita sincronizar el contenido con el área de texto real (posiblemente en ambas direcciones?).
  • Agrega complejidad al colocar sugerencias y otros elementos relativos a la posición de un área de texto.
  • Si bien este enfoque funciona para algo como una actualización de estado de Facebook, ¿qué tan bien funcionaría en una forma que contenga cientos de elementos de entrada estándar?

Lo que he expuesto anteriormente representa el "último tamaño de área de texto", que aborda lo que percibo como problemas con los enfoques existentes. ¿Existe tal control? ¿Es posible escribir tal control?

¿Quieres auto-dimensionar la pantalla? ¿Pero dejar el contenido igual?

Eso es todo lo que pueden hacer los scripts, ajustar la pantalla y permitirle ver más de su propio texto ...

Es posible que necesite rodar su propio para cumplir con esos requisitos.

Estos podrían ser un comienzo.

http://tuckey.org/textareasizer/ (aunque intente y evite eval () en el suyo)

http://www.felgall.com/jstip45.htm

http://viralpatel.net/blogs/2009/06/textarea-resize-javascript-jquery-plugin-resize-textarea-html.html

Esto en realidad parece un buen plugin de jQuery. Puede que tenga un tackle en desarrollar algo como esto. Si lo hago, lo publicaré aquí.

Pasé algunas horas desarrollando algo, pero luego encontré este que parece ser realmente bueno.

http://www.aclevercookie.com/demos/autogrow_textarea.html

He estado usando nicEdit . Parece que tiene todo lo que necesita y la secuencia de comandos es de solo 1700 líneas con una licencia MIT, por lo que podría realizar los cambios que necesite.

Esta publicación de A List Apart contiene una implementación que se parece mucho a cumplir con sus criterios y contiene una buena explicación de lo que está sucediendo.