jQuery-скрипт для авторастяжки текстового поля textarea

19 11 2008

Однажды я уже писал о таком скрипте, но он оказался не совершенен, и в результате я им так и не стал пользоваться. Однако задача найти подходящий скрипт для авторастяжки этого поля все-таки стояла передо мной.

И я нашел красивое решение, в виде jQuery-скрипта под названием jGrow. Проверял его в разных браузерах, в целом все нормально, заметил только один недочет — в Опере появляется горизонтальная прокрутка.

Размер самого скрипта совсем небольшой, выглядит вот так:

var $j = jQuery.noConflict();
$j.fn.jGrow = function(options) {
var opts = $j.extend({}, $j.fn.jGrow.defaults, options);
return this.each(function() {
$j(this).css({ overflow: "hidden" }).bind("keypress", function() {
$this = $j(this);
var o = $j.meta ? $j.extend({}, opts, $this.data()) : opts;
if(o.rows == 0 && (this.scrollHeight > this.clientHeight)) {
this.rows += 1;
} else if((this.rows <= o.rows) && (this.scrollHeight > this.clientHeight)) {
this.rows += 1;
} else if(o.rows != 0 && this.rows > o.rows) {
$this.css({ overflow: "auto" });
}
$this.html();
});
});
}
$j.fn.jGrow.defaults = { rows: 0 };
$j(document).ready(function() { $j("#comment").jGrow({ rows: 25 }); })

Здесь нам интересна в плане настроек лишь последняя строка, а, вернее, вот эта ее часть:

$j("#comment").jGrow({ rows: 25 });

#comment — это идентификатор поля textarea, к которому хотим прицепить скрипт.
rows: 25 — максимальное количество строк, до которых будет происходить авторастяжка. Если содержимое поля станет больше этого количества строк, то появляется прокрутка.

Если сделать вот так:

$j("#comment").jGrow();
то снимается ограничение на максимальную высоту textarea, т.е., в зависимости от количества текста, это поле может растягиваться бесконечно.

Прошу заметить следующий момент. Cрипт не работает, если тегу <textarea> задана высота через CSS, поэтому взамен нужно воспользоваться параметром rows:

<textarea name="comment" id="comment" cols="70" rows="8"></textarea>

Протестировать работу скрипта авторастяжки можно прямо на моем блоге.

Надеюсь, кому-то пригодится.


Actions

Информация

2 комментария на “jQuery-скрипт для авторастяжки текстового поля textarea”

16 03 2009
ghghgh (22:54:55) :

работает:)

10 08 2012
Me (19:44:31) :

Полная хуйня! Автор мудак и черт. Чайник и лузер! ЛОХ!

Оставить комментарий

Вы можите использовать теги : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Реклама от партнеров: регистрация ООО в Самаре может проводиться как самим предпринимателем. | Отделка парных под ключ europool.com.ua/rumskaya-parnaya/. | Свежая информация стоимость охранной сигнализации квартиры на нашем сайте. | viagra