Imprimir textarea con scrollbar

makeitslow · #1 (**permalink**) 30/04/2007, 11:47

Hola a todos, no quise abrir otro tema para pregunta mi duda, asi que aprovecho este para hacerlo, es posible imprimir el contenido de un TEXTAREA que esta limitado por SCROLLBARS? Por ejemplo, tengo varios elementos en una pagina, y entre ellos un TEXTAREA que contiene 100 lineas, pero solo se muestran 10, si imprimo la pagina, solo me imprimira el contenido visible del TEXTAREA y el resto no, como podria hacer para imprimirlo sin pasarloa a un TEXTAREA AUTOAJUSTAbLE???

JavierB · #2 (**permalink**) 30/04/2007, 12:03

Hola makeitslow

Lo que preguntas no tiene relación con el mensaje original, así que lo separo en un tema nuevo, para no liarnos.

Saludos,

makeitslow · #3 (**permalink**) 05/06/2007, 09:17

Hola de nuevo... a la ausencia de respueta a mi pregunto, cambio mi situacion, quisiera saber como puedo hacer un TEXTAREA AUTOAJUSTABLE.

Alguien sabe??

Gracias!

derkenuke · #4 (**permalink**) 05/06/2007, 12:05

Ahí no es como una caja de texto normal, al haber saltos de línea, y no tener que completar los caracteres la línea completa no se me ha ocurrido una manera de calcular si se necesita scroll o no en el textarea.

Si a alguien se le ocurre, posting please.

De momento dejo este aporte, sólo calcula el ancho, el cols, pero no se me ocurre cómo hacer la altura:

Código:

<textarea cols="10" rows="5" onkeypress="ajusta(this)"></textarea>

<script>

var primeraVez=false;
var colsOriginal, rowsOriginal;
function ajusta(box) {
	var cols=parseInt( box.getAttribute("cols") );
	var rows=parseInt( box.getAttribute("rows") );
	if(primeraVez==false) {
		colsOriginal=cols;
		rowsOriginal=rows;
		primeraVez=true;
	}
	//la palabra más larga (si es más larga que cols) definirá el nuevo cols
	var palabras=box.value.split(/\s/);
	for(var i=0, max=0; i<palabras.length; i++)
		if(palabras[i].length>max)
			max=palabras[i].length;
	if(max>colsOriginal)
		box.setAttribute("cols",max);
}


</script>

Vamos a intentar la altura...

makeitslow · #5 (**permalink**) 05/06/2007, 12:44

Gracias Derkenuke.... Tu respuesta muy rapida!

Voy a probarlo... el pequeño detalle es que lo quiero para llenarlo con contenido de una consulta de MYSQL, no para escribir en el.

Saludos!

makeitslow · #6 (**permalink**) 15/06/2007, 11:51

He estado averiguando y el resulta de un TEXTAREA QUE SE AJUSTA AL CONTENIDO esta en este tema: TEXTAREA AUTOAJUSTABLE.

Saludos.

derkenuke · #7 (**permalink**) 15/06/2007, 12:51

Bueno pero es algo diferente, hay que tener en cuenta que el value ya está dado, y que el ancho lo escogemos nosotros previamente para obtener un alto.

En mi script el ancho depende de la palabra más larga, autoajustándose si se escribe una palabra que no cabe de ancho (y por tanto evitando el scroll horizontal).

Aunque me ha dado alguna idea.... Me he estado acercando a la idea de contar cuantas letras caben en una línea de textarea. Si alguien se le ocurre, que participe.

Un saludo.

derkenuke · #8 (**permalink**) 15/06/2007, 13:10

Bueno, me he rendido. Buscando buscando he entrado ejemplos de crecimiento vertical:
http://markos.gaivo.net/examples/gro...rea/index.html

Así que mi script se reduciría a ésto:

Código PHP:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="Author" content="derkeNuke">
</head>

<body>


<textarea cols="15" rows="5" onkeydown="ajusta(this)"></textarea>

<div id="info"></div>

<script>

var primeraVez=false;
var colsOriginal, altoOriginal, bordes;
function ajusta(box) {
    var cols=parseInt( box.getAttribute("cols") );
    if(primeraVez==false) {
        colsOriginal = cols;
        altoOriginal = box.offsetHeight;
        primeraVez = true;
        bordes = box.offsetHeight - box.scrollHeight;
    }
    //la palabra más larga (si es más larga que cols) definirá el nuevo cols
    var palabras=box.value.split(/s/);
    for(var i=0, max=0, laMasLarga=""; i<palabras.length; i++)
        if(palabras[i].length>max) {
            max=palabras[i].length;
            laMasLarga = palabras[i];
        }
    if(max>colsOriginal)
        box.setAttribute("cols",max);
    else
        max = parseInt(colsOriginal)+1;        // el atributo cols deja un caracter más de los que dice dejar.
    

    document.getElementById("info").innerHTML = (box.scrollHeight+bordes) +" -- "+ box.offsetHeight;
    box.style.height = Math.max( box.scrollHeight+bordes, altoOriginal );


}


</script>

</body>
</html>

Más alguna manera de quitar altura si se borran caracteres o cuando se aumenta el ancho.

Seguiré en ello.