Cambiar el tamaño de un textarea con JS
Escrito por J.F. el Miércoles, 14 de Noviembre del 2007 a las 13:40
En ésta ocasión vamos a ver un práctico ejemplo que podría servirnos a la hora de inluir textareas en nuestras páginas web. Lo que vamos a hacer es modificar mediante Javascript, las dimensiones del textarea, de forma que pinchando en diferentes botones obtendremos un textarea de tamaño normal, grande o pequeño. Para alterar las filas y columnas de un textarea a través de Javascript, podemos hacerlo de la siguiente manera:
document.formulario.nombre_textarea.rows = número de filas;
document.formulario.nombre_textarea.cols = número de columnas;
Para ver su funcionamiento, he creado un textarea con 3 botones, en los cuales mediante el evento onClick, llamaremos a la función dimensiones() que se encargará de asignar las dimensiones en función del parámetro que le pasamos(un parámetro diferente en cada botón). Aquí está el código:
-
function dimensiones(opcion) {
-
switch(opcion)
-
{
-
case 1:
-
document.formulario_.comentario.rows = 10;
-
document.formulario_.comentario.cols = 60;
-
break;
-
case 2:
-
document.formulario_.comentario.rows = 5;
-
document.formulario_.comentario.cols = 30;
-
break;
-
case 3:
-
document.formulario_.comentario.rows = 2;
-
document.formulario_.comentario.cols = 30;
-
break;
-
}
-
}
-
</script>
-
</head>
-
<form name="formulario_">
-
<textarea name="comentario" rows="5" cols="30" style="overflow:auto">
-
Escribe aquí tu comentario.
-
</textarea><br/>
-
<input type="button" name="grande" value="Grande" onClick="dimensiones(1);"/>
-
<input type="button" name="normal" value="Normal" onClick="dimensiones(2);"/>
-
<input type="button" name="little" value="Pequeño" onClick="dimensiones(3);"/>
-
</form>
-
</body>
-
</html>
Si no te gusta lo de los botones, también podemos hacer que el textarea se haga más grande al situar el foco en él, y que encoja al perderlo, como en éste ejemplo:
Categoria: Javascript
- Añadir este post a
- Del.icio.us -
- Meneame -
- Digg -
- Webeame
Entradas relacionadas
Comentario de fico
Realizado el Domingo, 24 de Agosto del 2008 a las 1:44
bueno me sirvio mucho tu consejo defrente lo pegue en mi pagina y dio el resultado que estaba buscando
…gracias
Comentario de vinnie
Realizado el Jueves, 25 de Febrero del 2010 a las 19:41
Excelente Ejemplo, justo lo que andaba buscando para un panel WYSIWYG.
Comentario de vinnie
Realizado el Jueves, 25 de Febrero del 2010 a las 20:48
Olvidaba las gracias y desearte la mejor de las suertes.
