Foros del Web » Programando para Internet » Javascript »

textarea ajustable

Estas en el tema de textarea ajustable en el foro de Javascript en Foros del Web. Buenas estoy intentando hacer un textarea ajustable al contenido que se le ponga es decir quiero que empiece siendo un campo de una fila y ...
  #1 (permalink)  
Antiguo 31/03/2012, 07:07
 
Fecha de Ingreso: noviembre-2011
Mensajes: 516
Antigüedad: 11 años, 2 meses
Puntos: 10
textarea ajustable

Buenas
estoy intentando hacer un textarea ajustable al contenido que se le ponga es decir quiero que empiece siendo un campo de una fila y se valla ampliando a medida que escribes en el, e conseguido que se amplie a medida que se escribe pero tambien kiero que se vuelva a poner mas pequeño cada vez que se borre una linea mi codigo hasta ahora es este
Código PHP:
Ver original
  1. <script type="text/javascript">
  2. function sapeartextarea(){
  3.     var nav=(document.all)?"%0D":"%0A"
  4.     var ref=document.getElementById("textarea")
  5.     textoarea=escape(ref.value)
  6.     lineas=textoarea.split(nav)
  7.     lin=lineas.length
  8.     if(lin>4){
  9.         ref.rows=lin
  10.         document.getElementById("clin").innerHTML=lin
  11.     }
  12. }
  13. document.onkeyup = function(){sapeartextarea()}
  14. </script>
  15.  
  16. <textarea name="textarea" id="textarea" cols="45" rows="5" style="overflow:hidden"></textarea>
Tambien quiero que funcione no solo al pulsar intro y aga el salto de linea sino al escribir que tampoco lo realiza aora.
Como puedo hacer que si borras una linea se haga mas pequeño este textarea??? esque no se mucho de javascritp, gracias un saludo.

Última edición por edie8; 31/03/2012 a las 07:14
  #2 (permalink)  
Antiguo 31/03/2012, 20:00
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 20 años, 2 meses
Puntos: 317
Respuesta: textarea ajustable

Ese ejemplo no funciona. Con suerte podría andar en IE.

Estás tratando de manipular uno de los elementos más difíciles del HTML. ¿Realmente tiene que ser un textarea? ¿No te sirve una simulación?

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>TEXTAREA TRUCHO AUTOAJUSTABLE.</title>
<script type="text/javascript">

var ref , cont = ":-)";

function sapeartextarea(){ 

ref = document.getElementById("textarea");

document.getElementById("guardatxt").style.height = ref.offsetHeight + "px";

document.getElementById("guardatxt").style.width = 
(ref.offsetWidth > 300)? ref.offsetWidth + "px" : "300px";

cont = document.getElementById("textarea").innerHTML.replace(/<br>/gi , "\r\n").replace(/&nbsp;/gi , " ");
}

</script>
<style type="text/css">
#guardatxt { width: 300px; height: 1em; overflow: hidden; 
padding: 0.2em; border: solid 1px black; }

#textarea { font: normal 16px/16px monospace; background: yellow; }

</style>
</head>
<body>

<div id=guardatxt onkeyup=sapeartextarea()>
<span contenteditable=true id=textarea>Escriba aquí su texto.</span>
</div>

<input type=button value="ENVIAR" onclick=alert(cont)>
</body>
</html>
Este código tiene un bug en Opera: no acepta saltos de línea en el span, se "salen". Si alguien tiene una idea de por qué pasa esto me gustaría que me iluminara.

Por otro lado, en Chrome y Firefox el alto se ajusta por línea virtual, el ancho mínimo es ahí de 300px y se agranda si una palabra no puede hacer wrapping.
Para enviar el contenido hay que reemplazar algunas etiquetas y entidades, porque en verdad es HTML y no texto.

En IE no lo probé. Antiguamente tenía la costumbre de meter párrafos adentro del span, pero supongo que la aberración ya estará corregida.
  #3 (permalink)  
Antiguo 01/04/2012, 04:09
 
Fecha de Ingreso: noviembre-2011
Mensajes: 516
Antigüedad: 11 años, 2 meses
Puntos: 10
Respuesta: textarea ajustable

Pues esque como lo haces no se mandarlo a la pagina php que registra los datos con ajax... entonces x eso me gustaria usar un textarea, pero si me dices como se manda por ajax esto te lo agradeceria. un saludo.
  #4 (permalink)  
Antiguo 01/04/2012, 07:15
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 20 años, 2 meses
Puntos: 317
Respuesta: textarea ajustable

(Antes que nada, un offtopic : Gracias a quien barrió el spam del tema! )

La verdad es que no sé nada de Ajax, pero lo mandas de la misma forma que con el textarea: capturando el contenido. Para eso te puse un botón que simula un envío. Justamente lo que tienes que mandar es la cadena de la variable cont.
Que por otra parte, ya probé en un IE 8. Sigue metiendo párrafos. Eso se arregla con una expresión regular que cubra cualquier etiqueta, pero como éste es un caso específico y no aparece otra que <p></p>, lo solucionamos con el mismo invento de replace() que ya venimos usando.

Código:
...
cont = document.getElementById("textarea").innerHTML.replace(/<br>/gi , "\r\n").replace(/&nbsp;/gi , " ").replace(/<p>|<\/p>/gi , "");
...
Lo de Opera está en veremos.
  #5 (permalink)  
Antiguo 01/04/2012, 15:04
 
Fecha de Ingreso: noviembre-2011
Mensajes: 516
Antigüedad: 11 años, 2 meses
Puntos: 10
Respuesta: textarea ajustable

vale muchas gracias lo probare aber si me sirve gracias un saludo.
  #6 (permalink)  
Antiguo 07/04/2012, 13:52
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 20 años, 2 meses
Puntos: 317
Respuesta: textarea ajustable

De nada. Me alegra que te sirviera.

Y encontré el drama de Opera. Es el mismo de IE, pero "bien hecho". O masomenos.

En vez de poner las etiquetas <p> adentro del <span>, lo que hace al insertar un break (con la tecla [Intro]) es :
  1. Capturar la posición donde se encuentra el break o salto de línea.
  2. Dividir el span en 2 span's por ese punto de salto.
  3. Rodear a cada uno con etiquetas <p> para crear los párrafos.
Un ejemplo de correción semántica este Opera. Porque pensemos que nosotros vamos a capturar el texto plano, pero lo que se está escribiendo en esa caja es HTML; por eso está la creación de párrafos, para separar cada línea de texto con formato.
Y éste vendría a ser el problema. Porque para respetar los formatos previos, a cada span le deja los atributos originales. Quiero decir, que al "segundo" le copia los que tenga el "primero".
Y si tiene un id, también lo duplica.

De esa forma, el CSS no encuentra el primero(*), y el JS ignora el último.

Podríamos suponer que con innerText nos ahorramos todos problemas de reemplazo y de etiquetas agregadas, pero sucede que Firefox no lo reconoce (usa textContent), y navegadores como Opera o Chrome no ven los caracteres de 'nueva línea' y 'retorno de carro', y muestran el texto todo de corrido.
Así que seguimos con el innerHTML, que es compatible con todos.

Otra cuestión que no mencionamos arriba es qué pasa cuando no tipeamos en el "truchárea", sino que pegamos o cortamos texto desde el menú de herramientas o el menú contextual. El evento de teclado no se dispara y el escript no se ejecuta, por supuesto.

La forma compatible que usé para corregir la siguiente versión, es el evento onblur. Solamente muestra el cambio al salirse el foco del editable, pero si se va a enviar el contenido a algún lado, seguramente hay que ir a un botón. Al clickearlo cambia el foco y actualiza la variable cont, y recién después la envía.

No pude probarlo todavía en IE, pero creo que va a funcionar. Si alguien quiere hacer el betatesting, le agradezco.

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>TEXTAREA TRUCHO AUTOAJUSTABLE.</title>
<script type="text/javascript">

var ref , cont = ":-)";

function sapeartextarea(){

ref = document.getElementById("textareaTrucho");

document.getElementById("guardatxt").style.height = ref.offsetHeight + "px";

document.getElementById("guardatxt").style.width =
(ref.offsetWidth > 400)? ref.offsetWidth + "px" : "400px";

cont = ref.innerHTML.replace(/<p>/gi , "").replace(/&nbsp;/gi , " ").replace(/<br>|<\/p>/gi , "\r\n");

document.getElementById("codigo").value = cont;

}

function limpiartextarea(){

document.getElementById("textareaTrucho").innerHTML="";

sapeartextarea();

}
</script>
<style type="text/css">

#guardatxt { width: 400px; height: 1em; overflow: hidden; padding: 0.2em; 
border: solid 1px black; }

#textareaTrucho { font: normal 16px/16px monospace; background: yellow; 
display: inline-block; min-height: 1em; min-width: 1em;}

</style>
</head>
<body>
<h2>Simula un <code>textarea</code> que ajusta su tamaño al contenido. </h2>

<input type=button value="ENVIAR" onclick=alert(cont)> 
<input type=button value="LIMPIAR" onclick=limpiartextarea()> 

<div id=guardatxt>
<div contenteditable=true id=textareaTrucho onkeyup=sapeartextarea() 
onblur=sapeartextarea()>Texto de prueba en campo editable.</div>
</div>

<hr>

<p style="font-family: 'arial unicode ms', quivira, symbola, titus;">( Aquí se ve cómo será 
enviado el contenido del falso <code>textarea</code> :<br>&nbsp; &#x261f;</p>

<textarea id=codigo rows=10 cols=50></textarea> 

)

</body>
</html>
Otro pequeño ajuste fue cambiar el span por un div, así el IE también quedará "semanticamente correcto". Además optimicé las expresiones regulares (que los novatos no se asusten, todavía se entienden), y por último agregué unos "min-width ; min-height" para evitar que al borrarle todo el contenido el editable "colapsara" y ya no mostrase un lugar donde hacer foco con el maus (ratón). El botón "LIMPIAR" está para la comodidad de hacer las pruebas, tiene una función aparte.


Insisto, cualquier mejora es bienvenida ... Hasta que los navegadores implementen su propio modo para leer el tamaño del valor de los textarea; y todo esto no sirva para nada.

Saludos
furoya


(*) : Aunque no sea correcto, los navegadores nuevos aplican formatos CSS a los id repetidos, como si se tratara de clases.

Etiquetas: ajustable, html, textarea
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 19:04.