Размер самого скрипта совсем небольшой, выглядит вот так:
Код
<script type="text/javascript">
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 }); })
</script>
В этом скрипте интересна в плане настроек лишь последняя строка, а, вернее, вот эта ее часть:
Код
$j("#comment").jGrow({ rows: 25 });
#comment - это идентификатор поля textarea, к которому хотим прицепить скрипт.
rows: 25 - максимальное количество строк, до которых будет происходить авторастяжка.
Если содержимое поля станет больше этого количества строк, то появляется прокрутка.
Данное можете подстроить под себя как вам удобно.
Но если поставить так:
Код
$j("#comment").jGrow();
то снимается ограничение на максимальную высоту textarea, т.е., в зависимости от количества текста, это поле может растягиваться бесконечно.
По желанию можно заметить следующий момент.
Cрипт не работает, если тегу: Скачать
