¿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

42

Realmente no. Esto normalmente se hace usando javascript.

hay una buena discusión sobre las formas de hacer esto aquí ...

Tamaño automático del área de texto usando Prototype

— Rik Heywood
fuente

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