¿Hay alguna manera de hacer que un área de texto se estire para adaptarse a su contenido sin usar PHP o JavaScript?

95

Estoy llenando un área de texto con contenido para que el usuario lo edite.

¿Es posible hacer que se estire para que se ajuste al contenido con CSS (como overflow:showpara un div)?

html css significado
fuente
1
¿Nadie tiene una respuesta que no tenga errores que no use un marco? :-(
starbeamrainbowlabs
Simplemente utilizo css max-width: 100% y se ajusta automáticamente a una caja. ¿Algún problema con eso?
yashas123

Respuestas:

210

solo una línea

<textarea name="text" oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'></textarea>
Martin Prestone
fuente
8
¿Cómo es que esto tiene solo dos votos? esto es increíble Martín. Solo paso 30 minutos tratando de resolver esto. Buen trabajo.
Philip Duffney
30
Esto es genial. Solo me gustaría agregar que cambiar this.scrollHeight + "px"a this.scrollHeight + 3 + "px"hace que el área de texto sea lo suficientemente grande como para que no muestre la barra de desplazamiento.
maarten
Problema: cuando el usuario escribe lo suficiente para desplazarse hacia abajo, restablece la posición de desplazamiento cada vez que agrega una nueva línea con Enter.
Costa
5
Sé que esta es una pregunta antigua, pero tengo un área de texto en una página de edición y ya tiene un valor cuando se carga la página, ¿cómo puedo hacer que se expanda para que se ajuste al contenido?
Arootin Aghazaryan
1
@ArootinAghazaryan: es posible que ya haya encontrado una solución, pero para cualquier otra persona: simplemente cree una función con el código de cambio de tamaño en lugar de tenerlo en línea en el HTML. Entonces puede llamar a la misma función al cargar la página.
Magnus Eriksson
6

Aquí hay una función que funciona con jQuery (solo para la altura, no para el ancho):

function setHeight(jq_in){
    jq_in.each(function(index, elem){
        // This line will work with pure Javascript (taken from NicB's answer):
        elem.style.height = elem.scrollHeight+'px'; 
    });
}
setHeight($('<put selector here>'));

Nota: El operador solicitó una solución que no use Javascript, sin embargo, esto debería ser útil para muchas personas que se encuentren con esta pregunta.

Chris Dutrow
fuente
5

Esta es una solución muy simple, pero me funciona:

<!--TEXT-AREA-->
<textarea id="textBox1" name="content" TextMode="MultiLine" onkeyup="setHeight('textBox1');" onkeydown="setHeight('textBox1');">Hello World</textarea>

<!--JAVASCRIPT-->
<script type="text/javascript">
function setHeight(fieldId){
    document.getElementById(fieldId).style.height = document.getElementById(fieldId).scrollHeight+'px';
}
setHeight('textBox1');
</script>
Expandir fragmento

NicB
fuente
2
La altura del cuadro aumenta con cada pulsación de tecla, no solo con las nuevas líneas. Incluso retroceder y eliminar hacen que la altura aumente. Arregla y obtendrás el voto a favor.
Birrel
algunos navegadores como IE no calculan correctamente la altura de desplazamiento, lo que puede provocar ese tipo de problemas. no importa que me esté sucediendo en Chrome también ...
KthProg
1
aquí está la solución (la cola de edición está llena): <style> textarea { resize: none; overflow: auto; } </style> <!--TEXT-AREA--> <textarea onkeyup="setHeight.call(this);">Hello World</textarea> <!--JAVASCRIPT--> <script type="text/javascript"> function setHeight(){ this.style.height = '1px'; this.style.height = this.scrollHeight + 'px'; } </script>básicamente, primero debe establecer la altura en 1px, debido a esto: stackoverflow.com/questions/10722058/…
KthProg
3

Otra solución simple para el control dinámico del área de texto.

<!--JAVASCRIPT-->
<script type="text/javascript">
$('textarea').on('input', function () {
            this.style.height = "";
            this.style.height = this.scrollHeight + "px";
 });
</script>
Expandir fragmento

Krutika Patel
fuente