Para un proyecto en el que estoy trabajando, que tiene bastantes textareas, necesitaba una forma de optimizar el espacio disponible. Así que navegando por internet, y buscando posibles alternativas -a ser posible que utilizasen Protoype-, me encontré con esta opción de redimensionar textareas dinamicamente con Ajax. Modifiqué ligeramente el código para ajustar el redimensionamiento un poco mejor y la verdad es que me permite optimizar mucho mejor el espacio en la retícula. Los textarea únicamente ocuparán el espacio del texto que contienen.
Ver Ejemplo en funcionamiento » »
Para utilizarlo hay que:
1.- Descargarse Prototype y hacer el enlace oportuno en nuestra web:
<script language="javascript" src="Prototype.js"></script>
2.- Dentro de la etiqueta <head> insertar el siguiente código:
var RedimenTextArea = Class.create();
RedimenTextArea.prototype = {
FilasDefecto: 1,
initialize: function(field)
{
this.FilasDefecto = Math.max(field.rows, 1);
this.redimensiona = this.redimensiona.bindAsEventListener(this);
Event.observe(field, "click", this.redimensiona);
Event.observe(field, "keyup", this.redimensiona);
},
redimensiona: function(event)
{
var t = Event.element(event);
var lineas = t.value.split('\n');
var FilasAhora = lineas.length-1;
var FilasAntes = t.rows;
for (var i = 0; i < lineas.length; i++)
{
var linea = lineas[i];
if (linea.length >= t.cols) FilasAhora += Math.floor(linea.length / t.cols);
}
if (FilasAhora > t.rows) t.rows = FilasAhora;
if (FilasAhora < t.rows) t.rows = Math.max(this.FilasDefecto, FilasAhora);
}
}
