Скрипт для авторастяжки поля комментирования
Нашел интересную приблуду для формы комментирования, которая мне пришлась по душе – скрипт, автоматически растягивающий в высоту поле добавления комментария в зависимости от длины введенного текста, исключающий при этом появление вертикального скролла.
Иными словами, как только высота введенного текста окажется больше высоты поля добавления комментария, оно автоматически растянется на высоту текста. Это делает процесс комментирования более удобным, если пишется достаточно большой комментарий.
По большому счету данный скрипт применим не только к полю комментариев на блоге, а вообще к тегу <textarea>
, как таковому.
Скрипт совсем небольшой, работает на jQuery, т.е. для его работы необходима подключенная к сайту библиотека jQuery.
Установка тоже довольно проста:
- Скачать полную версию скрипта (неупакованная, с возможностью смены настроек), либо упакованную версию (без опций).
- Подключить скрипт к сайту следующим кодом (заменив путь к файлу на свой):
<script type="text/javascript" src="pretty-comments.js"></script>
- Перед формой комментирования вставить следующий небольшой ява-скрипт:
<script type="text/javascript" charset="utf-8"> $(document).ready(function(){ prettyComments.init('comment'); }); </script>
где
comment
– идентификатор тега<textarea>
. - Подключить к сайту (если это еще не сделано) библиотеку jQuery.
- Если вы скачали полную версию, то можно поиграться с настройками, которые расположены в верхней части кода скрипта pretty-comments.js.
Вот и все.
Работающий пример вы можете увидеть на блоге автора скрипта.
Пробуем и юзаем :).
* * *
Группа компаний «Эффективные решения» предоставляет большой спектр услуг по управлению предприятием и ведению информационного учета, в том числе сопровождение 1С в виде аутсорсинга, что позволяет предприятию сократить лишние издержки и обеспечить бесперебойность работы системы «1С:Предприятие».
Комментарии (23)
Потестил – прикольно. Но вот тут народа жалуется на притормаживания – ну его нафиг – не буду ставить…
Потестил у автора на блоге – вроде норм – слегка конечно чувствуется, но вцелом для простых смертных юзеров со средней скоростью набора вполне норм. А вот на блоги где аудитория про гиков, программеров и проч – туда бы я точно не стал ставить 8-)
В опере не работает. Это раз.
А два – жутко тормозит.
А чем скролл не устраивает?
У меня в Опере работает.
Спасибо, это будет реально полезно. Тем более, что веду блог на WP :)
Притормаживает однозначно. Пока набирал этот комментарий очень напрягало.
Я где-то встречал поле для комментариев, которое можно мышкой растягивать.
во первых, тормоза жуткие, во-вторых – а зачем это? %)
еле ввел этот коммент. в таком виде юзать скрипт явно нельзя
Позвольте показать пример, который использовал сам
[quote]
function countLines(strtocount, cols) {
var hard_lines = 1;
var last = 0;
while ( true ) {
last = strtocount.indexOf(“\n”, last+1);
hard_lines ++;
/* if ( hard_lines == 35) break; */
if ( last == -1 ) break;
}
var soft_lines = Math.round(strtocount.length / (cols-1));
var hard = eval(“hard_lines ” + unescape(“%3e”) + “soft_lines;”);
if ( hard ) soft_lines = hard_lines;
return soft_lines;
}
function cleanForm() {
var the_form = document.getElementById(‘submitForm’);
for ( var x in the_form ) {
if ( ! the_form[x] ) continue;
if( typeof the_form[x].rows != “number” ) continue;
the_form[x].rows = countLines(the_form[x].value,the_form[x].cols) +1;
}
/* установка задержки */
setTimeout(“cleanForm();”, 300);
}
cleanForm();
[/quote]
код куда проще, работает вроде везде, и без лагов.. демо на http://iframe.in/
Jacky, еще бы знать, куда совать этот код… :)
=)
назначаешь id для формы – submitForm (в js коде можно найти и поменять на другое название), должно работать
Нормально получилось, оригинально,спасиба что автор поделился с нами такой инфой.
А зачем это нужно вообще? Только если поэму в коммент пытаться заунуть…
Там кто-то говорил, что в опере ничего не работает и все тормозит. Так вот, у меня опера и все работает и ничего не тормозит.
А можно версию оперы в студию?
Шенген, не кто-то, а milax. Версия оперы дома 9.10. На работе – последняя. Только бить не надо? ;)
Работает через раз, не знаю с чем связано.
P.S. Скроллы чем не нравятся? ))
да щас. никаких им скролов и тем более “растяжек” пусть умещают свои коменты в поставленные рамки. краткость – сестра таланта
По поводу – торможения – однозначно!!! Вчера попробовал в тестовой страничке – все было – норм. Сегодня внедрил в рабочий проект – в Опере и Фоксе тормоза совсем жуткие, в ИЕ еще куда ни шло, но все равно пришлось отказаться.
2 Aшветия К примеру если у тебя стиль сайта чисто черный без излишеств – то скроллы будут портить дизайн. Поэтому, в принципе идея хорошая, а реализацию еще нужно улучшать.
2 DeveloperGuru.NET Да, есть такой, textarea.js назывется. Полезная вещь. Особенно для админок например, если публикуешь большую статью, то оч удобно. Кажется на drupal.org находил этот скрипт.
у меня в девятой опере тоже не работает кстати
Читаю комментарии и удивляюсь =]
Вы же должны понимать, что наличие или отсутствие лагов зависит целиком и полностью от клиентского железа, на котором этот скрипт отрабатывает. Больше чем уверен, что если избавится от эффекта ПЛАВНОГО вытягивания поля ввода скрипт начнет работать быстрее.
Скроллы для текстарии не угодили тем, что они уродские и инородные, даже в Сафари =]
А вообще вариант хороший и удобный, но не подходит мне по той причине, что не дружит со script.aculo.us, к которому привык и нежно люблю. Попробую предложенный Jecky вариант
Спасибо! Применил =)
А что, очень мило, мне нравится…
Пробовал в разных браузерах – всё норм.