Автоматическое растягивание поля комментариев (textarea), растягивающаяся форма комментариев

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

Пришлось полазить по форумам, как рунета, так и евронета и удалось кое что найти.

Хочу отметить плюсы данного скрипта, изменяющего автоматически размеры поля комментирования:

  • Простая установка в шаблон вашего блога
  • Автоматическое растягивание поля комментария
  • Работает во всех браузерах

Вот и сам скрипт, который надо устанавливать к себе на блог:

Скрипт кросс-браузерный, поэтому нету нагрузки на компьютер.

  1.     /** Скрипт для автоматического растягивания поля (Textarea) по вертикали
  2.     ——————————————————————————
  3.     # Для работы скрипта высота textarea не должна быть определена жёстко (НЕ должно быть определено CSS свойство height),
  4.     # вместо height можно использовать min-height:200px; или лучше задать высоту через rows=».
  5.     # Также, можно ограничить максимальную высоту растяжки через CSS свойством max-height:800px;
  6.     */
  7.     function _resizer(){
  8.         var textarea = ‘comment’; // id атрибут тега textarea
  9.         var repeat = 500; // время подсчета строк в миллисекундах 500=0,5 секунд.
  10.         var cof = 55; // коэффициент. Увеличте, если появляеться прокрутка.
  11.         textarea = document.getElementById(textarea);
  12.         textarea.onfocus = do_resize;
  13.         textarea.onblur = stop_resize;
  14.         //функция подсчета строк
  15.         function countLines(strtocount) {
  16.             var hard_lines = 0;
  17.             var str = strtocount.split(«n»);
  18.             hard_lines = str.length;
  19.             var letter_width = textarea.clientHeight/textarea.rows*cof/100; // приблизительная ширина одной буквы в пикселях
  20.             var chars_in_line = textarea.clientWidth/letter_width; //сколько букв в строке
  21.             var lines = 0;
  22.             var temp = 0;
  23.             for(i=0; i<=(hard_lines-1); i++){ //hard_lines-1 = количество элементов в массиве
  24.                 temp = str[i].length / chars_in_line;
  25.                 if(temp>0) lines += temp;
  26.             }
  27.             return lines+hard_lines;
  28.         }
  29.         // Ресайз поля
  30.         function do_resize() {
  31.             if(!textarea){ return; }
  32.             var new_rows = countLines(textarea.value);
  33.             if( textarea.rows!=new_rows+1 ) textarea.rows = new_rows;//чтобы не прыгало
  34.             timeout_resize = setTimeout(function(){ do_resize(); }, repeat);
  35.         }
  36.         function stop_resize(){ clearTimeout(timeout_resize); }
  37.     }
  38.     if (window.addEventListener)
  39.         window.addEventListener(«load», _resizer, false);
  40.     else if (window.attachEvent)
  41.         window.attachEvent(«onload», _resizer);

Установка скрипта, растягивающего форму комментария

1. Скопируйте данный код ( выше) и вставьте его в любой шаблоновский файл с расширением javascript ( js).

2. Установите полям в форме комментария минимальные границы, при помощи CSS свойства min-height.

3. Чтобы форма комментария не растягивалась до бесконечности задайте ей максимальную границу.
Вставка скрипта в шаблон темы

Вставляйте скрипт в любой файл вашей темы с расширением js. Если же в вашей теме нету таких файлов, то его можно создать, скопировав затем код. Для этого файл надо загрузить с помощью FTP в папку /public_html/wp-content/themes/ваша тема. После чего подключите данный скрипт к шаблону.

А можно сделать по-другому. Откройте файл шаблона single.php и вставьте в него данный код:

  1. <script type=»text/javascript»>/* <![CDATA[ */
  2. Здесь вставьте выше приведенный код
  3. /* ]]> */</script>

Выставляем границы формы комментариев. Устанавливаем полю textarea свойство min-height

1. Способ: В шаблоне откройте файл comments.php и ищите там тег textarea, припишите к нему CSS свойство style='min-height:200px; max-height:700px;'.

В итоге должно быть так:

  1. <textarea style=»min-height:200px; max-height:700px;» rows=»58″ name=»comment» id=»comment» tabindex=»4″></textarea>

Тут также прописан тег max-height:700px; — его не обязательно ставить. Но, если не хотите, чтобы форма комментариев разъезжалась до бесконечности, то пропишите этот тег.

2. Способ: Откройте файл стилей вашего шаблона ( style.css) и поищите поле с записью textarea, также, как и в первом случае, добавьте к нему min-height:200px;. Если рядом с этим тегом будет присутствовать height:XXXpx, то удалите его.

Класс, который отвечает за это поле может быть по-разному, в зависимости от темы. Например:

textarea#comment

#commentform textarea

#comment

Принцип работы скрипта

Когда курсор мыши попадает в форму комментария, автоматически включается, каждый 0,5 секунд, подсчет строк. Когда курсор мыши уходит из поля, подсчет останавливается. Строки считаются суммированием переносов пользователем и тех, которые были перенесены из-за нехватки места сбоку.

Способ на jQuery

Если же на вашем блоге установлена библиотека jQuery, то можно использовать вот этот скрипт:

  1.     /*
  2.      * jQuery autoResize (textarea auto-resizer)
  3.      * @copyright James Padolsey http://james.padolsey.com
  4.      * @version 1.04
  5.      */
  6.     (function($){
  7.         $.fn.autoResize = function(options) {
  8.             // Just some abstracted details,
  9.             // to make plugin users happy:
  10.             var settings = $.extend({
  11.                 onResize : function(){
  12.                 },
  13.                 animate : true,
  14.                 animateDuration : 150,
  15.                 animateCallback : function(){},
  16.                 extraSpace : 20,
  17.                 limit: 1000
  18.             }, options);
  19.             // Only textarea’s auto-resize:
  20.             this.filter(‘textarea’).each(function(){
  21.                     // Get rid of scrollbars and disable WebKit resizing:
  22.                 var textarea = $(this).css({resize:’none’,’overflow-y’:’hidden’}),
  23.                     // Cache original height, for use later:
  24.                     origHeight = textarea.height(),
  25.                     // Need clone of textarea, hidden off screen:
  26.                     clone = (function(){
  27.                         // Properties which may effect space taken up by chracters:
  28.                         var props = [‘height’,’width’,’lineHeight’,’textDecoration’,’letterSpacing’],
  29.                             propOb = {};
  30.                         // Create object of styles to apply:
  31.                         $.each(props, function(i, prop){
  32.                             propOb[prop] = textarea.css(prop);
  33.                         });
  34.                         // Clone the actual textarea removing unique properties
  35.                         // and insert before original textarea:
  36.                         return textarea.clone().removeAttr(‘id’).removeAttr(‘name’).css({
  37.                             position: ‘absolute’,
  38.                             top: 0,
  39.                             left: -9999
  40.                         }).css(propOb).attr(‘tabIndex’,’-1′).insertBefore(textarea);
  41.                     })(),
  42.                     lastScrollTop = null,
  43.                     updateSize = function() {
  44.                         // Prepare the clone:
  45.                         clone.height(0).val($(this).val()).scrollTop(10000);
  46.                         // Find the height of text:
  47.                         var scrollTop = Math.max(clone.scrollTop(), origHeight) + settings.extraSpace,
  48.                             toChange = $(this).add(clone);
  49.                         // Don’t do anything if scrollTip hasen’t changed:
  50.                         if (lastScrollTop === scrollTop) { return; }
  51.                         lastScrollTop = scrollTop;
  52.                         // Check for limit:
  53.                         if ( scrollTop >= settings.limit ) {
  54.                             $(this).css(‘overflow-y’,»);
  55.                             return;
  56.                         }
  57.                         // Fire off callback:
  58.                         settings.onResize.call(this);
  59.                         // Either animate or directly apply height:
  60.                        settings.animate && textarea.css(‘display’) === ‘block’ ?
  61.                             toChange.stop().animate({height:scrollTop}, settings.animateDuration, settings.animateCallback)
  62.                             : toChange.height(scrollTop);
  63.                     };
  64.                 // Bind namespaced handlers to appropriate events:
  65.                 textarea
  66.                     .unbind(‘.dynSiz’)
  67.                     .bind(‘keyup.dynSiz’, updateSize)
  68.                     .bind(‘keydown.dynSiz’, updateSize)
  69.                     .bind(‘change.dynSiz’, updateSize);
  70.             });
  71.             // Chain:
  72.             return this;
  73.         };
  74.         /* инициализируем растягивание textarea */
  75.     $(function(){
  76.         $(‘textarea’).autoResize({
  77.             extraSpace:0
  78.         });
  79.     })
  80.     })(jQuery);

Данный скрипт вставьте в файл темы с расширением js, либо же создайте, вставив туда этот скрипт. Затем подключите его к вашему сайту.

 


Похожие записи:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Похожие записи: