Sigueme por RSS! RSS

Textarea autoResize con JQuery

El plug-in de JQuery autoresize como su traducción lo indica, permite ajustar automáticamente el tamaño de un campo de tipo textarea al que se le haya asignado la funcionalidad.

Uso:

1.- descagamos el plug-in y junto al JQuery,lo incluimos entre etiquetas head preferiblemente.
<!-- incluimos le JQuery-->
<script type="text/javascript" src="jquery.js"></script>
<!-- incluimos le plugin -->
<script type="text/javascript" src="autoresize.jquery.js"></script>

2.- configuramos el plug-in:
<script type="text/javascript">
// inicializamos
$(document).ready(function () {
   // en este caso lo aplicamos a un solo campo
   $('#id_de_mi_textarea').autoResize();
});
</script>

3.- nos aseguramos que el textarea tenga el id indicado en la configuración.
<textarea id="id_de_mi_textarea" style="width: 400px; padding: 10px; height: 50px;">
Escribe algo aquí y cuando te acercas al final del textarea, éste se expandirá
</textarea>

Disponemos de algunas propiedades extras para personalizar la funcionalidad, a continuación un ejemplo comentado:
// OnResize: permite indicar que procesos se ejecutaran 
// antes de que se cambie el tamaño del campo
onResize: function() {
   // ..
},

// Si se establece en false no se llevará a cabo la animación,
// la altura cambiará inmediatamente cuando sea necesario. 
// Por defecto está establecido en true
Animate: true,

// duración de milisegundos de la animación,
// por defecto que está establecido en 150
AnimateDuration: 200,

// duración de milisegundos de la animación, por defecto que está establecido en 150
animateDuration : 400,

// por defecto es 20, permite agregar algunos pixeles extras a la altura total requerida 
extraSpace : 40,
    
// permite indicar el limite de expansión
// una vez que el área de texto llege a esta altura, se detendrá la expansión
// Por defecto está configurado para 1000
limite: 700

Demostración y descargas en la página oficial.

0 comentarios: Suscribete a los comentarios por RSS

Publicar un comentario

- Los comentarios están siendo moderados y serán publicados en la brevedad posible.