Reklama.
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.
opublikowane 11-06-2012145476 powrót
© aleproste.pl v.10 Projekt i realizacja projekt.etvn.pl & aleproste.pl