autoResize: textarea подстраивается под высоту текста

Заставить textarea изменять высоту, в зависимости от введенного пользователем текста далеко не тривиальная задача. Наиболее удачное, на мой взгляд, решение на данный момент, реализовал James Padolsey, автор плагина autoResize.

Суть метода — клонировать textarea, использовать свойство DOM scrollTop, чтобы получить истинную высоту текста, а затем присвоить эту высоту настоящему текстовому полю. Просто и элегантно!

На практике это выглядит так:

Проверено в:

• IE 6-8
• Firefox 3.5
• Opera 9.5-10
• Safari 3.1

Что качать?

• (72.32 Kb) — библиотека jQuery версии 1.4.2
• (3.77 Kb) — плагин autoresize

Быстрый старт

Подключаем jQuery и плагин:

<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/autoresize.jquery.min.js"></script>

В CSS задаем первоначальные размеры textarea.

textarea{
	width:400px;
	height:70px;
}

Инициализируем ресайз для текстового поля, с помощью команды jQuery('textarea').autoResize();

<script type="text/javascript">
	jQuery(function()
	{
		jQuery('textarea').autoResize();
	});
</script>

А теперь подробнее

Функция autoResize может принимать следующие параметры:

Примеры:

Отключаем дополнительный отступ снизу (по умолчанию он составляет 20px):

jQuery('textarea').autoResize({
     extraSpace : 0
});

Кстати, этот отступ (extraSpace) дает забавный эффект. Поскольку добавляется он к textarea не изначально, а только при первом вводе, то и текстовое поле при первом вводе внезапно расширяется (на величину extraSpace). Такой скачек может показаться нелогичным — ведь поле изначально может быть высоким и места в нем еще много, а оно все равно расширилось! Чтобы такого не происходило, можно инициализировать ресайз с параметром extraSpace : 0 (как в примере выше).

Демонстрация анимации при ресайзе:

	jQuery('textarea').autoResize({
	 	// On resize:
		onResize : function() {
			jQuery(this).css({color:'#fff', backgroundColor:'#999'});
		},
		// After resize:
		animateCallback : function() {
			jQuery(this).css({color:'#000', backgroundColor:'#fff'});
		}
	});

Заметка

Функция animateCallback будет вызываться, только если для textarea в CSS задать display:block (притом, исходя из текста плагина, сделано это специально). Учти, что этот самый display:block (если мы ему не помешаем) вызовет появление в Opera полос прокрутки. Для того, чтобы такого сюрприза не случилось используем overflow:hidden.

textarea{
	width:400px;
	height:70px;
	overflow:hidden;
	display:block;
}

Демо пример работы событий onResize и animateCallback.

Проверено в:

• IE 6-8
• Firefox 3.5
• Opera 9.5-10
• Safari 3

Неприятность в IE6

К сожалению в IE6 плагин корректно работает только при отсутствии xml декларации. Если первая строка твоего документа не DOCTYPE, а что-то вроде этого: <?xml version="1.0" encoding="utf-8"?>, то в IE6 ресайза не будет.

Хирургическое вмешательство

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

(3.99 Kb) — модифицированный плагин autoresize.

Демо пример с модифицированным плагином — xml декларация присутствует и в IE6 все работет.

Проверено в:

• IE 6-8
• Firefox 3.5
• Opera 9.5-10
• Safari 3

Изменение размеров вручную

Некоторые браузеры предоставляют пользователю возможность менять размер textarea вручную. Подробнее по поводу того что это такое и как этой возможностью управлять, можно почитать в статье Resize для textarea в Safari и Chrome.

Данный плагин отключает эту возможность автоматически.

В случае, если она все-таки нужна, открываем autoresize.jquery.js и строку

var textarea = $(this).css({resize:'none','overflow-y':'hidden'}),

меняем на

var textarea = $(this).css({'overflow-y':'hidden'}),

Материал

• james.padolsey :: jquery-plugin-autoresize