autoResize para textareas

autoResize es un plugin para JQuery que te permitirá agregarle la opción de autoescalado a los campos de texto según la cantidad de texto que ingreses, esto para evitar mostrar un scroll y ver el contenido completo.

jquery-autoresize

Como usar este Plugin
Para utilizar este plugin, es necesario primero descargar las librerías jquery.js, autoresize.jquery.js, luego lo incluimos en el header de nuestro html.

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

El siguiente paso es crear nuestro formulario en donde a los elementos del tipo textarea le asignamos un ID con el cual posteriormente le aplicaremos el método autoresize.

  1. <form id="comment" method="post" >
  2. <textarea name="mensaje" id="mensaje"></textarea>
  3. <input type="submit" name="bt" value="Enviar" />
  4. </form>

Finalmente seleccionamos el elemento utilizando el ID al cual aplicamos el método autoresize, esto lo hacemos una vez que ha sido cargada la página para ello utilizamos el evento ready, esto lo hacemos mediante:

  1. $(document).ready(function () {
  2.     $('textarea#mensaje').autoResize();
  3. });

Pueden ver el ejemplo funcionando en autosize Demo. Como pueden ver es muy sencillo de aplicar este efecto con lo cual conseguiremos facilitar el ingreso de la información. Este script tiene algunas propiedades adicionales que se pueden utilizar para mejorar la presentación de nuestro formulario, para mayor información pueden visitar la web oficial en jQuery plugin: ‘autoResize’.

Comentarios Total 3 comentarios


Crysfel
Publicado: 09/03/2009 2:22 pm

Gracias por el dato, voy a probarlo un día de estos, esto puede tener varios usos muy prácticos.

saludos

christian
Publicado: 30/04/2009 10:17 am

una pregunta el ultimo codigo donde debe de ir

$(document).ready(function () {

$(‘textarea#mensaje’).autoResize();

});

manuel luna
Publicado: 23/07/2012 6:06 pm

muy bueno y fácil de usar gracias ya lo pruebo hoy mismo :)

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)