|

Laboratorio: evitar el scroll en los textarea con jQuery

Una cosa que he visto en una web que estoy usando y que me ha gustado bastante es que el alto de los textarea se adapta al contenido para evitar que aparezca el scroll vertical.

En plan rapidito he hecho un script jQuery que realizaría esta función:

$(document).ready(function () {
$('textarea').keypress(function() {
var ta = $(this);
var fontSize = ta.css('font-size').replace('px', '')*1.3; // Le añado un ratio para que sea más eficiente
var taWidth = ta.width();
var taHeight = ta.height();
var content = ta.attr('value').split('\n');
var lines = content.length;
for (var i=0; i<content.length; i++) {
if (content[i].length * fontSize > taWidth) lines += parseInt(content[i].length * fontSize / taWidth);
}
var ratioHeight = taHeight / fontSize;
if (lines * fontSize > taHeight) ta.height((lines * fontSize)+150); // Le sumo 150 para darle un margen y que no se agrande constantemente
});
});

Plugin para WordPress que mejora las textareas

aNieto2K nos ofrece un plugin para WordPress que mejora nuestras textareas, dándoles la posibilidad de aumentar o disminuir el tamaño de la caja de texto, y la posibilidad de aumentar o disminuir el tamaño del tipo de letra.
textareatools.png
Para ello se basa en un script, el cual podemos usar nosotros para nuestros propios intereses, no es necesario disponer de WordPress y usar el plugin.
Lo que me parece un poco feo (al menos en Firefox) es que cuando pinchas en alguno de los botones que se añaden al textarea, se remarca el enlace con recuadro de puntos y resulta que va desde la esquina superior izquierda de la página hasta el botón. Pero aún así, un script y un plugin muy interesantes.
Textarea Tools WordPress Plugin, mejora tus textareas