Bardzo fajny efekt "elastycznego pola" textarea, które wraz z wpisywanym do niego tekstem zmienia swoją wielkość, czyli głównie chodzi o to, że się powiększa, "rozpychając się" na stronie, możemy osiągnąć za pomocą skryptu ( wtyczki jQuery) autorstwa Chrys'a Bader'a ( www.chrysbader.com ).

Skrypt nie jest wielki i wygląda następująco:

(function(jQuery) {
	var self = null;

	jQuery.fn.autogrow = function(o)
	{
		return this.each(function() {	new jQuery.autogrow(this, o); });
	};

	jQuery.autogrow = function (e, o)
	{
		this.dummy = null;
		this.interval = null;
		this.line_height = 0, parseInt(jQuery(e).css('line-height'));
		if(this.line_height == NaN) this.line_height = 0;
		this.min_height = parseInt(jQuery(e).css('min-height'));
		this.options = o;
		this.textarea = jQuery(e);

		// Only one textarea activated at a time, the one being used
		this.init();
	};

	jQuery.autogrow.fn = jQuery.autogrow.prototype = { autogrow: '1.1'};

 	jQuery.autogrow.fn.extend = jQuery.autogrow.extend = jQuery.extend;

	jQuery.autogrow.fn.extend({

		init: function() {
			var self = this;
			this.textarea.css({overflow: 'hidden', display: 'block'});
			this.textarea.bind('focus', function() { self.startExpand() } ).bind('blur', function() { self.stopExpand });
			this.checkExpand();
		},

		startExpand: function() {
		  var self = this;
			this.interval = window.setInterval(function() {self.checkExpand()}, 400);
		},

		stopExpand: function() {
			clearInterval(this.interval);
		},

		checkExpand: function() {


			if (this.dummy == null)
			{
				this.dummy = jQuery('<div></div>');
				this.dummy.css({
				'font-size'  : this.textarea.css('font-size'),
				'font-family': this.textarea.css('font-family'),
				'width'      : this.textarea.css('width'),
				'padding'    : this.textarea.css('padding'),
				'line-height': this.textarea.css('line-height'),
				'overflow-x' : 'hidden',
				'display'    : 'none',
				'position'   : 'absolute',
				'top'        : 0,
				'left'       : '-9999px'
			}).appendTo('body');

			}

			var html = this.textarea.val();

			if (this.dummy.html() != html)
			{
				this.dummy.html(html);

				if (this.textarea.height() != this.dummy.height() + this.line_height)
				{
					this.textarea.animate({height: (this.dummy.height() + this.line_height + 20) + 'px'}, 100);
				}
			}
		}
	 });
})(jQuery);

Wszytko ładnie, a jednak gdy tylko zaczniemy wpisywać tagi html, skrypt zaczyna wariować. Jak temu zaradzić?

Okazuje się, że poprawka jest bardzo prosta, wystarczy dodać trzy proste linie kodu:

html = html.replace(/</g, '_');		//eliminuje wycinanie tagów html
html = html.replace(/>/g, '_');		//eliminuje wycinanie tagów html

html = html.replace(/
/g, '<br>new');

Powyższe instrukcje umieszczamy bezpośrednio po:

var html = this.textarea.val();

Dziś, kiedy pisałem ten tekst, znalazłem w sieci podobną poprawkę, która niestety też miała jedną wadę. Znaleziona wtyczka zwyczajnie wycinała z tekstu nawiasy "<>" co powodowało, że rozmiar pola tekstarea nie był prawidłowo modyfikowany.

Moja poprawka jest pozbawiona, powyżej opisanej wady, a dodatkowo prawidłowo współpracuje z wtyczką zliczającą ilość znaków wpisanych w pole textarea.