¿Cómo hago un cuadro de texto en expansión?

Quiero hacer un libro de texto donde empiece con un ancho/alto determinado. Entonces, si los usuarios escriben más que la cantidad de espacio dada, el cuadro de texto se expande hacia abajo. ¿Cómo voy a hacer esto? ¿Uso CSS? El cuadro de texto básico solo muestra una barra de desplazamiento cuando los usuarios pasan la cantidad de filas permitidas. ¿Cómo lo hago para que el cuadro de texto amplíe las filas, digamos 5 más?¿Cómo hago un cuadro de texto en expansión?

<form method="post" action=""> 
<textarea name="comments" cols="50" rows="5"></textarea><br> 
<input type="submit" value="Submit" /> 
</form>

¿Cómo utilizo el ejemplo que mencionó Robert Harvey? Nunca había usado antes JavaScript ..

Fuente

2010-05-27 jpjp

jQuery Plugin AutoResize
http://james.padolsey.com/javascript/jquery-plugin-autoresize/

Pasos para utilizar:

Usted necesita jQuery. Para añadirlo a su página:

<script type="text/javascript" 
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>

A continuación, descargar el plugin y ponerlo en la misma carpeta que su página web. Para hacer referencia a ella, añadir a su página Web:

<script type="text/javascript" 
    src="autoresize.jquery.js"></script>

A continuación, agregue un cuadro de texto a su página:

<textarea id="comment" style="width: 400px; padding: 10px; height: 50px; 
    display: block; font-family:Sans-serif; font-size:1.2em;"> 
    Type something in here, when you get close to the end the box will expand! 
</textarea>

Por último, en un bloque de script, agregue el código que se conecta el plugin para el cuadro de texto:

<script type="text/javascript"> 
    $('textarea#comment').autoResize({ 
     // On resize: 
     onResize : function() { 
      $(this).css({opacity:0.8}); 
     }, 
     // After resize: 
     animateCallback : function() { 
      $(this).css({opacity:1}); 
     }, 
     // Quite slow animation: 
     animateDuration : 300, 
     // More extra space: 
     extraSpace : 40 
    }); 
</script>

Fuente

2010-05-27 20:31:57

o que es impresionante. ¡¡justo lo que necesitaba!! – jpjp

Lo siento pero nunca antes había usado jquery. ¿Me deberías ayudar a hacer que esto funcione? Descargué los códigos y los puse en . Pero el cuadro de texto sigue siendo el mismo – jpjp

Aquí hay un buen video instructivo: http://www.youtube.com/watch?v=Hk5oXFtYLwE O puede leer la documentación de jQuery: http://docs.jquery.com/Tutorials: Getting_Started_with_jQuery – mVChr

Puede agregar una biblioteca si lo desea, o simplemente realizar un seguimiento de la propiedad scrollTop de la tabla de texto.

Si scrollTop no es cero, agregue sus filas.

<!doctype html> 
<html lang= "en"> 
<head> 
<meta charset= "utf-8"> 
<title>Expand textarea </title> 
<style> 
textarea{overflow-y:scroll} 
</style> 
<script> 
onload=function(){ 
    var who=document.getElementsByName('comments')[0]; 
    who.onkeyup=function(){ 
     if(who.scrollTop)who.rows=parseInt(who.rows)+5; 
    } 
} 
</script> 
</head> 
<body> 
<textarea name="comments" cols="50" rows="5"></textarea> 
</body> 
</html>

Fuente

2010-05-27 21:50:59 kennebec

Agradable, simple y sin biblioteca, pero aún necesita mucho trabajo; [violín] (http://jsfiddle.net/h7jmmwcv/). Pegar con el mouse (tecla no invocada), ingresar texto desde la parte superior (scrolltop no modificado), borrar texto (altura no reducida), molesta barra de desplazamiento inútil que se muestra son algunas de las cosas que me impiden querer usarlo – Hashbrown

Aquí está my solution usando sólo vainilla javascript.
Probado para trabajar en Chrome, Firefox & IE8 y superior.

En la carga, o golpear en una función:

var element = document.getElementById('comments'); 
var retractsAutomatically = false; 

var sizeOfOne = element.clientHeight; 
element.rows = 2; 
var sizeOfExtra = element.clientHeight - sizeOfOne; 
element.rows = 1; 

var resize = function() { 
    var length = element.scrollHeight; 

    if (retractsAutomatically) { 
     if (element.clientHeight == length) 
      return; 
    } 
    else { 
     element.rows = 1; 
     length = element.scrollHeight; 
    } 

    element.rows = 1 + (length - sizeOfOne)/sizeOfExtra; 
}; 

//modern 
if (element.addEventListener) 
    element.addEventListener('input', resize, false); 
//IE8 
else { 
    element.attachEvent('onpropertychange', resize) 
    retractsAutomaticaly = true; 
}

CSS & HTML:

textarea#comments { overflow:hidden; }

<textarea id="comments" cols="50" rows="1"></textarea>

Fuente

2014-12-30 01:20:30 Hashbrown

¿Cómo hago un cuadro de texto en expansión?

Respuesta

Cuestiones relacionadas