
Такая вот идиотская метафора почему-то пришла мне в голову, когда я начал писать этот пост. А теперь, объясню нормально 
Все вы наверняка видели формы комментария, которые можно растягивать (тянутся вниз). Мне такая практика кажется очень удобной, если пишешь большой комментарий и он не помещается в форму, то появляется скроллинг, особенно неудобно, мне это показалось, когда в комментарий вставляешь какие-нибудь коды. Так, отвечая на один из комментариев на этом блоге я задался целью сделать поле куда пишется комментарий растягивающимся в высоту, при этом чтобы оно тянулось автоматически, если текст не помещается в поле.
Решением стал такой javascript, автором которого является web-технолог:
function flexibleTextarea(){
var _txt = document.getElementById('comment'); // здесь comment - это идентификатор поля, которое будет растягиваться.
var _minRows = 7; // минимальное количество строк (высота поля)
if (_txt) {
// функция расчета строк
function setRows() {
_txt.rows = _minRows; // минимальное количество строк
// цикл проверки вместимости контента
do {
if (_txt.clientHeight != _txt.scrollHeight) _txt.rows += 1;
} while (_txt.clientHeight < _txt.scrollHeight);
}
setRows();
_txt.rows = _minRows;
// пересчет строк в зависимости от набранного контента
_txt.onkeyup = function(){
setRows();
}
}
}
if (window.addEventListener)
window.addEventListener("load", flexibleTextarea, false);
else if (window.attachEvent)
window.attachEvent("onload", flexibleTextarea);
Установка скрипта
Чтобы подключить скрипт, нужно скопировать его в какой нибудь js файл вашего сайта или создать отдельный, например, myjs.js файл (скопировать туда код) и подключить его в шаблоне так (подключается в head часть):
<script type='text/javascript' src='http://site.ru/<путь до созданного файла>/myjs.js'></script>
Но лучше все же внедрить код в какой-нибудь уже имеющийся js файл - экономия одного запроса к серверу никогда не будет лишней.
Настройка скрипта
Возможно нужно будет настроить параметр _minRows - это высота поля, куда вводится комментарий.
Также если вдруг идентификатор поля комментария у вас отличается от comment (это стандартный id в WordPress), то измените его в этой строчке:
var _txt = document.getElementById('comment')
Пример работы этого скрипта можете наблюдать на этом блоге в форме комментирования.
- Предыдущие по меткам
- Предыдущие записи
- Перелинковка статей в WordPress (предыдущие записи из категории) ← 4.Май.2010 // 87
- Условные теги в WordPress и все что с ними связано ← 2 Июнь 2010 // 12
- Исполняемый php код в записях Wordpress ← 6 Июль 2010 // 32
- Сравнение СЕО плагинов platinum SEO Pack и All in One SEO Pack и отказ от них ← 24 Май 2010 // 73
Очень полезный скриптик, спасибо.
А вы на всех браузерах его пытали? В Google Chrome всё отлично работает, а вот в IE8 кривовато - тормозит страшно при расширении поля и если оно уже далеко вниз ушло, то при ещё большем расширении курсор к началу формы комментирования переносится.
Да, действительно, скрипт недоделанный.
Сегодня провел несколько часов в попытках починить его, выяснилось, что сделать это крайне не просто. Я бы даже сказал невозможно, если учитывать что нужна кросбраузерность. В нем базовый параметр (на котором строится сам скрипт) scrollHeight имеет разное значение в разных браузерах.
Уже сделал скрипт, который работает по другому принципу, только что доделал. Скоро выложу в виде очередной статьи.
П.С. Этим скриптом пользоваться не особо советую
Спасибо большое!!!
Все работает крссбраузерно.
В ИЕ немного неправильно растягивает - всегда чуть разный размер.
Но в целом - это самое лучшее решения что я нашел в интернете без использования библиотек.
Спасибо!!!
Приятно слышать такие отзывы. Меня тоже устраивает этот вариант, если отбросить всякие библиотеки.