autoResize: textarea подстраивается под высоту текста
Заставить textarea изменять высоту, в зависимости от введенного пользователем текста далеко не тривиальная задача. Наиболее удачное, на мой взгляд, решение на данный момент, реализовал James Padolsey, автор плагина autoResize.
Суть метода — клонировать textarea, использовать свойство DOM scrollTop, чтобы получить истинную высоту текста, а затем присвоить эту высоту настоящему текстовому полю. Просто и элегантно!
На практике это выглядит так:
Демо примерПроверено в:
Что качать?
- (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 может принимать следующие параметры:
Параметр | Описание | Тип данных |
---|---|---|
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
Неприятность в 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