Высота textarea по содержимому

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

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

Параметр Описание Тип данных
onResize Функция вызывается каждый раз в момент изменения размера textarea. Доступиться к textarea внутри функции можно как к ‘this’. функция
animate Анимация изменения высоты. Значение true — анимация есть, false — анимации нет. Значение по-умолчанию: true. boolean
animateDuration Время, которое занимает анимация в миллисекундах. Значение по-умолчанию: 150. число
animateCallback Функция вызывается каждый раз, как только заканчивается анимация. функция
extraSpace Количество пикселей которые будут добавлены к высоте textarea — дополнительный внутренний отступ снизу. Значение по-умолчанию: 20. число
limit По достижению этой высоты в пикселях текстовое поле перестает расширятся. Значение по-умолчанию: 1000. число

Примеры:

Отключаем дополнительный отступ снизу (по умолчанию он составляет 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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *