Скрипт для авторастяжки поля комментирования

Нашел интересную приблуду для формы комментирования, которая мне пришлась по душе – скрипт, автоматически растягивающий в высоту поле добавления комментария в зависимости от длины введенного текста, исключающий при этом появление вертикального скролла.

Иными словами, как только высота введенного текста окажется больше высоты поля добавления комментария, оно автоматически растянется на высоту текста. Это делает процесс комментирования более удобным, если пишется достаточно большой комментарий.

По большому счету данный скрипт применим не только к полю комментариев на блоге, а вообще к тегу <textarea>, как таковому.

Скрипт совсем небольшой, работает на jQuery, т.е. для его работы необходима подключенная к сайту библиотека jQuery.

Установка тоже довольно проста:

  1. Скачать полную версию скрипта (неупакованная, с возможностью смены настроек), либо упакованную версию (без опций).
  2. Подключить скрипт к сайту следующим кодом (заменив путь к файлу на свой):
    <script type="text/javascript" src="pretty-comments.js"></script>
  3. Перед формой комментирования вставить следующий небольшой ява-скрипт:
    <script type="text/javascript" charset="utf-8">
    	$(document).ready(function(){
    	prettyComments.init('comment');
    });
    </script>
    

    где comment – идентификатор тега <textarea>.

  4. Подключить к сайту (если это еще не сделано) библиотеку jQuery.
  5. Если вы скачали полную версию, то можно поиграться с настройками, которые расположены в верхней части кода скрипта pretty-comments.js.

Вот и все.

Работающий пример вы можете увидеть на блоге автора скрипта.

Пробуем и юзаем :).

* * *

Группа компаний «Эффективные решения» предоставляет большой спектр услуг по управлению предприятием и ведению информационного учета, в том числе сопровождение 1С в виде аутсорсинга, что позволяет предприятию сократить лишние издержки и обеспечить бесперебойность работы системы «1С:Предприятие».

Комментарии (23)

  1. 10 февраля 2008 г. в 08:49

    Потестил – прикольно. Но вот тут народа жалуется на притормаживания – ну его нафиг – не буду ставить…

  2. ACID Jesus
    10 февраля 2008 г. в 09:34

    Потестил у автора на блоге – вроде норм – слегка конечно чувствуется, но вцелом для простых смертных юзеров со средней скоростью набора вполне норм. А вот на блоги где аудитория про гиков, программеров и проч – туда бы я точно не стал ставить 8-)

  3. 10 февраля 2008 г. в 12:46

    В опере не работает. Это раз.
    А два – жутко тормозит.
    А чем скролл не устраивает?

  4. 10 февраля 2008 г. в 15:40

    У меня в Опере работает.

  5. 10 февраля 2008 г. в 22:15

    Спасибо, это будет реально полезно. Тем более, что веду блог на WP :)

  6. 10 февраля 2008 г. в 23:11

    Притормаживает однозначно. Пока набирал этот комментарий очень напрягало.
    Я где-то встречал поле для комментариев, которое можно мышкой растягивать.

  7. viki
    11 февраля 2008 г. в 11:37

    во первых, тормоза жуткие, во-вторых – а зачем это? %)
    еле ввел этот коммент. в таком виде юзать скрипт явно нельзя

  8. 11 февраля 2008 г. в 18:08

    Позвольте показать пример, который использовал сам

    [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/

  9. 11 февраля 2008 г. в 20:41

    Jacky, еще бы знать, куда совать этот код… :)

  10. 11 февраля 2008 г. в 22:37

    =)
    назначаешь id для формы – submitForm (в js коде можно найти и поменять на другое название), должно работать


  11. 11 февраля 2008 г. в 22:39

    Нормально получилось, оригинально,спасиба что автор поделился с нами такой инфой.

  12. Aшветия
    12 февраля 2008 г. в 07:25

    А зачем это нужно вообще? Только если поэму в коммент пытаться заунуть…

  13. 12 февраля 2008 г. в 18:31

    Там кто-то говорил, что в опере ничего не работает и все тормозит. Так вот, у меня опера и все работает и ничего не тормозит.
    А можно версию оперы в студию?

  14. 12 февраля 2008 г. в 22:56

    Шенген, не кто-то, а milax. Версия оперы дома 9.10. На работе – последняя. Только бить не надо? ;)
    Работает через раз, не знаю с чем связано.

    P.S. Скроллы чем не нравятся? ))

  15. Serch
    13 февраля 2008 г. в 11:41

    да щас. никаких им скролов и тем более “растяжек” пусть умещают свои коменты в поставленные рамки. краткость – сестра таланта

  16. XAMelleOH
    14 февраля 2008 г. в 17:46

    По поводу – торможения – однозначно!!! Вчера попробовал в тестовой страничке – все было – норм. Сегодня внедрил в рабочий проект – в Опере и Фоксе тормоза совсем жуткие, в ИЕ еще куда ни шло, но все равно пришлось отказаться.

    2 Aшветия К примеру если у тебя стиль сайта чисто черный без излишеств – то скроллы будут портить дизайн. Поэтому, в принципе идея хорошая, а реализацию еще нужно улучшать.

    2 DeveloperGuru.NET Да, есть такой, textarea.js назывется. Полезная вещь. Особенно для админок например, если публикуешь большую статью, то оч удобно. Кажется на drupal.org находил этот скрипт.

  17. 15 февраля 2008 г. в 14:50

    у меня в девятой опере тоже не работает кстати

  18. ATimofeev
    18 февраля 2008 г. в 15:41

    Читаю комментарии и удивляюсь =]

    Вы же должны понимать, что наличие или отсутствие лагов зависит целиком и полностью от клиентского железа, на котором этот скрипт отрабатывает. Больше чем уверен, что если избавится от эффекта ПЛАВНОГО вытягивания поля ввода скрипт начнет работать быстрее.

    Скроллы для текстарии не угодили тем, что они уродские и инородные, даже в Сафари =]

    А вообще вариант хороший и удобный, но не подходит мне по той причине, что не дружит со script.aculo.us, к которому привык и нежно люблю. Попробую предложенный Jecky вариант

  19. ROM
    11 апреля 2008 г. в 17:20

    Спасибо! Применил =)

  20. 25 июня 2008 г. в 22:12

    А что, очень мило, мне нравится…

    Пробовал в разных браузерах – всё норм.

Ваш комментарий

Жирный текст

Ссылка

Цитата

Внутристрочный код

CSS-код

HTML-код

JavaScript-код

PHP-код