Textarea resize

Necesito usar un textarea para mostrar algo de texto. El problema es que si coloco 4-5 filas de texto, aparecerá una barra de desplazamiento. ¿Cómo puedo usar CSS/HTML para que el área de texto sea tan grande como su contenido (sin barra de desplazamiento)?Textarea resize

el área de texto no tiene que cambiar su tamaño dynamicaly, lo uso sólo para mostrar un texto (que también podría utilizar un área de texto desactivado)
Quiero que el área de texto para estirar solamente verticalmente.

Si usted quiere saber:
uso el área de texto para mostrar un texto a partir de una base de datos, por lo que cuando se creó el área de texto (con el texto en ella), debe mostrar todo el texto a la vez con sin barras de desplazamiento

Fuente

2011-04-02 Cristy

El objetivo de un área de texto es para que el usuario pueda ingresar texto. Si desea mostrar texto, use un elemento con la semántica adecuada (tal vez div, p o pre). – Quentin

Me temo que tendrá que recurrir a javascript para establecer el alto de su área de texto. Puede usar la propiedad scrollHeight para determinar la altura total.

Como alternativa, puede utilizar div y marcar el estilo div para que parezca un área de texto. El div crecerá automáticamente y, como es un área de texto desactivada, no es necesario que sea un área de texto.

Fuente

2011-04-02 12:46:45 jeroen

Puede usar la altura CSS: y ancho: atributos, e. gramo. algo así como <textarea style="width:400px;height:300px">...</textarea>, simplemente use los tamaños que desee.

Además, si desea suprimir la barra de desplazamiento, use overflow:hidden.

Fuente

2011-04-02 12:41:52 addaleax

El problema es que el texto que se muestra tiene un tamaño variable, por lo que no puedo decir "ancho: 300 px;" . Un textarea puede ser 200px tal y otro puede ser 800px ... – Cristy

Busque la altura de la fuente en la que probablemente la vaya a mostrar. No estoy seguro acerca de CSS/HTML pero puede usar Javascript/PHP/ASP.net para usar el mapa y determinar qué tan grande será el texto basado en la cantidad de personajes Si lo haces en una fuente monoespaciada, esto será aún más fácil. ¿Por qué utilizar un área de texto cuando podría simplemente usar una etiqueta que hará lo mismo por sí misma?

Fuente

2011-04-02 12:46:01 FreeSnow

Uso un área de texto porque es un sitio web que hice hace un tiempo, y luego lo hice usando textarea, no puedo cambiar eso. Quiero decir, cuando escribes un div, span, el div cambia de tamaño automáticamente. ¿No puedo "activar" ese autoresize en textarea también?: D – Cristy

Bueno, cada control está hecho para hacer cosas diferentes. Textareas está hecho a propósito para que no cambien de tamaño. ¿Cuál es la razón por la que se requiere que uses el área de texto? – FreeSnow

Como creé un sitio web hace un año, le agrego algunos Anuncios (que contienen texto). En aquel entonces lo uso con textareas, y ahora quiero cambiar un poco la forma en que se ven. No quiero revisar todos los anuncios ya publicados y reemplazar el "área de texto" con un div. – Cristy

Si no les importa usar JavaScript se puede utilizar el enfoque de uno de los siguientes artículos: http://james.padolsey.com/javascript/jquery-plugin-autoresize/ http://scvinodkumar.wordpress.com/2009/05/28/auto-grow-textarea-doing-it-the-easy-way-in-javascript/

Pero desde su quest me supuesto de que desea una solución CSS puro. A continuación, puede aparicion simplemente imitan del área de texto usando simples css div y después (si sólo desea mostrar texto):

div { 
    cursor: text; 
    background: lightGray; 
    border: 1px solid gray; 
    font-family: monospace; 
    padding: 2px 0px 0px 2px; 
}

Fuente

2011-04-02 12:49:16 Eskat0n

Lo "malo" ya está hecho. He usado textarea en las páginas que he creado antes y quiero hacerles esto a todos sin cambiar nada a la página, solo cambiando la película CSS – Cristy

Es imposible con CSS (incluso con CSS3). Tienes que recurrir al uso de una pequeña porción de JavaScript. – Eskat0n

Bien, acabo de encontrar este y funciona muy bien:

<html> 
<head> 
<script> 
function textAreaAdjust(o) { 
    o.style.height = "1px"; 
    o.style.height = (25+o.scrollHeight)+"px"; 
} 
</script> 
</head> 
<body> 
<textarea onkeyup="textAreaAdjust(this)" style="overflow:hidden"></textarea> 
</body> 
</html>

Ahora, no debería asumir que sabes Javascript (pero podrías).

Sólo tiene que ejecutar

textAreaAdjust(document.getElementById("id of your text area"))

Algo así debería funcionar. No soy el mejor con Javascript (ni siquiera cerca, recién comencé a usarlo el otro día)

Parece hacer algo similar a lo que desea. El primer ejemplo de código es para un área de texto que cambia dinámicamente en función de lo que contiene (al escribir). Se necesitarán un par de cambios para obtenerlo como lo desee.

Fuente

2011-04-02 12:56:24 FreeSnow

Sé javascript pero no quiero usarlo aquí. Además, dije que el área de texto no tiene que ser editable, o cambiar su tamaño mientras escribo en él. Solo necesita mostrar el texto completo en él (cuando se carga la página) sin una barra de desplazamiento. – Cristy

Sé C++, también podría crear esa macro, pero ... ¿Dónde está la diversión? xD – Cristy

Montones y montones. Es mejor crear un sitio limpio y escrito en lugar de trabajar con una cosa pirateada. Especialmente cuando se trata de clientes. – FreeSnow

Supongo que el atributo name no se utiliza. Puede utilizar esta alternativa (HTML5):

http://jsfiddle.net/JeaffreyGilbert/T3eke/

Fuente

2011-04-02 14:11:05

Wtf? Cada vez que presiono enter en el div, ocurre algo extraño :)) Crea otro div dentro de ese. – Cristy

http://jsfiddle.net/JeaffreyGilbert/T3eke/1/ –

<!DOCTYPE html> 
<html> 
<head> 
<title>autoresizing textarea</title> 
<style type="text/css"> 
textarea { 
    border: 0 none white; 
    overflow-y: auto; 
    padding: 0; 
    outline: none; 
    background-color: #D0D0D0; 
    resize: none; 
} 
</style> 
<script type="text/javascript"> 
var observe; 
if (window.attachEvent) { 
    observe = function (element, event, handler) { 
     element.attachEvent('on'+event, handler); 
    }; 
} 
else { 
    observe = function (element, event, handler) { 
     element.addEventListener(event, handler, false); 
    }; 
} 
function init (maxH) { 
     var text = document.getElementById('text'); 
    var maxHeight=maxH; 
    var oldHeight= text.scrollHeight; 
    var newHeight; 
    function resize() { 

    text.style.height = 'auto'; 
    newHeight= text.scrollHeight; 
    if(newHeight>oldHeight && newHeight>maxHeight ) 
    { 
     text.style.height=oldHeight+'px'; 

    } 
    else{ 
     text.style.height = newHeight+'px'; 
     oldHeight= text.scrollHeight; 
    } 

    } 
    /* 0-timeout to get the already changed text */ 
    function delayedResize() { 
     window.setTimeout(resize, 0); 
    } 
    observe(text, 'change', resize); 
    observe(text, 'cut',  delayedResize); 
    observe(text, 'paste', delayedResize); 
    observe(text, 'drop', delayedResize); 
    observe(text, 'keydown', delayedResize); 

    text.focus(); 
    text.select(); 
    resize(); 
} 
</script> 
</head> 
<body onload="init(200);"> 
<textarea rows="1" style="height:1em;" id="text"></textarea> 
</body> 
</html>

http://jsfiddle.net/TDAcr/

Fuente

2012-10-13 17:39:38

¡Brillante, Amin! Siento que he encontrado oro en Internet al encontrar esto. Te mereces más de cuatro votos, pero solo tengo el voto que puedo darte. – Charlesism

puede utilizar como área de texto div. Es posible de esta manera:

<div contenteditable="true" style="width:250px; border:1px solid #777" ></div

Fuente

2013-11-02 11:03:38 Guwanch

Utilizando el resize property funciona en estos días:

cambio de tamaño: ninguno;

Fuente

2014-01-27 19:31:19

Respuesta

Cuestiones relacionadas