Contenidos
Area de texto html
Atributos del textarea
Había otro hilo sobre esto, que he probado. Pero hay un problema: el textarea no se encoge si se borra el contenido. No puedo encontrar ninguna manera de reducirlo al tamaño correcto – el valor de clientHeight vuelve como el tamaño completo del textarea, no su contenido.
Comienza con una sola línea y crece sólo la cantidad exacta necesaria. Está bien para un solo textarea, pero yo quería escribir algo donde tuviera muchos muchos textareas de este tipo (más o menos lo que uno normalmente tendría líneas en un documento de texto grande). En ese caso es realmente lento. (En Firefox es increíblemente lento.) Así que realmente me gustaría un enfoque que utilice CSS puro. Esto sería posible con contenteditable, pero quiero que sea sólo texto plano.
Estás usando el valor más alto del clientHeight actual y el scrollHeight del contenido. Cuando haces el scrollHeight más pequeño quitando contenido, el área calculada no puede hacerse más pequeña porque el clientHeight, previamente establecido por style.height, lo mantiene abierto. En su lugar, podrías tomar un max() de scrollHeight y un valor de altura mínima que hayas predefinido o calculado desde textarea.rows.
Textarea css
<textarea>: El elemento TextareaEl elemento HTML <textarea> representa un control de edición de texto plano de varias líneas, útil cuando se desea permitir a los usuarios introducir una cantidad considerable de texto de forma libre, por ejemplo, un comentario en un formulario de revisión o retroalimentación.
El elemento <textarea> también acepta varios atributos comunes a los <input> de formulario, como autocompletar, autofocus, disabled, placeholder, readonly y required.AttributesEste elemento incluye los atributos globales.
Se trata de un atributo no estándar soportado por WebKit en iOS (por lo tanto, por casi todos los navegadores que funcionan en iOS, incluyendo Safari, Firefox y Chrome), que controla si el valor del texto debe ponerse automáticamente en mayúsculas al ser introducido/editado por el usuario, y cómo hacerlo. Los valores no obsoletos están disponibles en iOS 5 y posteriores. Los valores posibles son:
Si el atributo de autocompletar no se especifica en un elemento <textarea>, el navegador utiliza el valor del atributo de autocompletar del propietario del formulario del elemento <textarea>. El propietario del formulario es el elemento <form> del que desciende este elemento <textarea> o el elemento de formulario cuyo id está especificado por el atributo form del elemento input. Para obtener más información, consulte el atributo de autocompletar en <form>.
Html <valor de textarea
<textarea>: El elemento TextareaEl elemento HTML <textarea> representa un control de edición de texto plano de varias líneas, útil cuando se quiere permitir a los usuarios introducir una cantidad considerable de texto de forma libre, por ejemplo, un comentario en un formulario de revisión o retroalimentación.
El elemento <textarea> también acepta varios atributos comunes a los <input> de formulario, como autocompletar, autofocus, disabled, placeholder, readonly y required.AttributesEste elemento incluye los atributos globales.
Se trata de un atributo no estándar soportado por WebKit en iOS (por lo tanto, por casi todos los navegadores que funcionan en iOS, incluyendo Safari, Firefox y Chrome), que controla si el valor del texto debe ponerse automáticamente en mayúsculas al ser introducido/editado por el usuario, y cómo hacerlo. Los valores no obsoletos están disponibles en iOS 5 y posteriores. Los valores posibles son:
Si el atributo de autocompletar no se especifica en un elemento <textarea>, el navegador utiliza el valor del atributo de autocompletar del propietario del formulario del elemento <textarea>. El propietario del formulario es el elemento <form> del que desciende este elemento <textarea> o el elemento de formulario cuyo id está especificado por el atributo form del elemento input. Para obtener más información, consulte el atributo de autocompletar en <form>.
Entrada multilínea html
Pero, al desactivar el comportamiento por defecto, es imposible mover el foco fuera del área de texto sin usar el ratón. Los usuarios ciegos interactúan con las páginas web usando el teclado y nada más — no pueden ver el puntero del ratón para hacer algo útil con él, así que es el teclado o nada. La tecla de tabulación es la principal forma de navegar por el documento, y especialmente por los formularios. Anular el comportamiento por defecto de la tecla de tabulación hará que los usuarios ciegos no puedan mover el foco al siguiente elemento del formulario.
Así que, si estás escribiendo un sitio web para un público amplio, te recomendaría no hacer esto sin una razón de peso, y proporcionar algún tipo de alternativa para los usuarios ciegos que no los atrape en el área de texto.
No llegué a ninguna parte rápidamente tratando de usar la respuesta de @kasdega en un entorno AngularJS, nada de lo que probé parecía capaz de hacer que Angular actuara sobre el cambio. Así que en caso de que sea de alguna utilidad para los transeúntes, aquí está una reescritura del código de @kasdega, al estilo de AngularJS, que me funcionó:
Esta solución permite tabular una selección completa como el típico editor de código, y destabular esa selección también. Sin embargo, no he averiguado cómo implementar shift-tab cuando no hay selección.