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

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

И я нашел красивое решение, в виде 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>

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

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

Комментарии (23)
  1. 1

    Я не очень понял… а что нельзя обнулить заданное через CSS свойство height? Дома попробую…

  2. 2

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

    Пригодится пригодится и еще как :)
    Спасибо.

  3. 3

    Спасибо, поставил у себя, тоже искал. Находил для друпала какой-то скрипт с рястягиваемой мышкой границей но вытаскивать лень было, ждал покуда что для jquery попроще будет.

    На родительские элементы тоже высоту видимо ставить нельзя, у меня плавать начинал поверх

  4. 4

    Steward, что имеешь в виду под словом «обнулить»?

    Sonikelf, пожалуйста ;)

    2Артём Курапов:

    На родительские элементы тоже высоту видимо ставить нельзя, у меня плавать начинал поверх

    Да, действительно, родительский блок должен быть «резиновым».

  5. 5

    Во FF3 если писать много текста в одну строку, то его не переносит… а просто обрезает :( и скролбар горизонтальный не появляется.

  6. 6

    А меня прёт реализация в Safari. надо много текста взял мышкой и растянул текстареа.

  7. 7

    Во FF3 если писать много текста в одну строку, то его не переносит… а просто обрезает :( и скролбар горизонтальный не появляется.

    Не наблюдаю ни того, ни другого.

    А меня прёт реализация в Safari. надо много текста взял мышкой и растянул текстареа.

    Согласен, очень удобная вещь. Разработчикам остальных браузеров нужно брать в пример данную фичу.

  8. 8
    Разработчик всякой хрени

    Не совсем понятно нафига это нужно. Во первых как уже говорилось можно через CSS, если уж так хочется. Да, еще момент. Если это присутствует на данном блоге, то в шестом ишаке какие то пятнашки получаются. Я пока набирал все дважы слева на право скакнуло.

    Хотя чисто с точки зрения разработчика достаточно интересно.

  9. 9

    Во первых как уже говорилось можно через CSS

    Во-первых, где такое говорилось? Во-вторых, сначала разберитесь в сути вопроса, прежде чем это писать.

    Если это присутствует на данном блоге, то в шестом ишаке какие то пятнашки получаются. Я пока набирал все дважы слева на право скакнуло.

    К скрипту это отношения не имеет. Пользуйтесь современным браузером.

  10. 10
    Сергей
    @

    Если скопипастить текст в textarea, то размер не меняется, пока кнопками курсора до конца текста не добежишь :-) FF3

  11. 11

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

    • 12
      Касперский
      @

      Скрипт говно! Автор во-первых не умеет писать плагины jqueryь а во вторых как уже было сказано не отслеживает достаточно событий. Я копирую комментарии в больших объемах.

  12. 13
    @

    Дима, рад что ты активнее начал писать статьи об использовании jquery.
    Тоже последнее время заинтересовался, изучаю, и использую в своих проектах.
    Кстати впервые услышал об этом фреймворке относительно недавно, когда прочел твою статью о вкладках

  13. 14

    Евгений, спасибо. Рад, что тебе нравится ;)

  14. 15
    Равиль
    @

    Я новичок. Недавно устновил себе wp. Что значит авто растягивание текстового поля? Какое именно поле будет растягиваться?

  15. 17
    Равиль
    @

    Ясно, Спасибо

  16. 18
    xxx

    в ie 7 вобще не работает

  17. 19
    Master
    @

    Здравствуйте, Дмитрий.
    Возможно мой вопрос будет не совсем по теме, но меня заинтересовал Ваш вариант растяжки «правила комментирования».
    Если Вам не трудно, подскажите, как реализовать эту функцию ?

  18. 22
    Владимир

    А зачем там функция noConflict() ?