jQuery-скрипт для авторастяжки текстового поля textarea
19 11 2008Однажды я уже писал о таком скрипте, но он оказался не совершенен, и в результате я им так и не стал пользоваться. Однако задача найти подходящий скрипт для авторастяжки этого поля все-таки стояла передо мной.
И я нашел красивое решение, в виде . Проверял его в разных браузерах, в целом все нормально, заметил только один недочет - в Опере появляется горизонтальная прокрутка.
Размер самого скрипта совсем небольшой, выглядит вот так:
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>
Протестировать работу скрипта авторастяжки можно прямо на моем блоге.
Надеюсь, кому-то пригодится.



работает:)