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

9 февраля 2008 г.

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

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

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

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

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

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

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

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

Вот и все.

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

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

* * *

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

Теги: , , автор: Dimox | рубрика jQuery

Комментарии (24): »

  1. Ввод текста сильно приторамаживает, т.е. буквы в поле комментария появляются медленнее, чем я их набираю. Честно говоря, напрягает.)

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

  3. Ничего не притормаживает, все работает отлично. Если не знаешь о том, что произайдет, то вполне можно удивиться и отметить свежесть мысли :) Мне нравится.

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

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

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

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

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

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

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

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

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

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

  13. =)
    назначаешь id для формы - submitForm (в js коде можно найти и поменять на другое название), должно работать
    <form method=”post” action=”" id=”submitForm“>
    <textarea rows=”10″ cols=”100″></textarea>
    </form>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге dimox.name:

  1. Первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "URL блога" можно указывать только ссылку на главную страницу вашего блога. Ссылки на прочие веб-ресурсы (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Запрещается использовать в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия имя изменяется по усмотрению владельца блога. Просьба указывать нормальное имя или ник.
  4. Весьма вероятно, что короткий и неинформативный кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме удаляются.

Подписаться, не комментируя
  • Похожие статьи
  • Предыдущие из рубрики