Автоматичне розтягування поля коментування (textarea) по вертикалі
- Варіант 1: авто-розтягування textarea (на чистому javascript)
- Варіант 2: авто-розтягування textarea (jQuery плагін)
- Незжата версія коду плагіна:
- 1. Приберемо відступ знизу, за замовчуванням він дорівнює 20 пікселів:
- Варіант 3: авто-розтягування textarea (мій старий скрипт)
- З плюсів цього варіанту зміни розмірів поля коментування, можна виділити:
- установка скрипта
- Як вставити скрипт прямо в файл теми:
- Як встановити полю textarea css властивість min-height
- Тих. подробиці: як працює скрипт
Дуже зручно, коли поле для введення тексту розтягується в висоту зі зворотним відліком. Для цього в сучасних бразуер є можливість розтягнути поле. А в цій замітці ми поговоримо про те, як зробити так, щоб поле textarea розтягувалося автоматично коли тексту в ньому більше ніж воно може помістити.
Варіант 1: авто-розтягування textarea (на чистому javascript)
Мабуть це найкраще рішення, тому це перший варіант.
А це пряме посилання на сам javascript код, який потрібно підключити до html: https://github.com/jackmoore/autosize/blob/master/src/autosize.js
Установка проста: підключаєте файл скрипта за допомогою wp_enqueue_script () . Потім підключаєте розтягування до елементу textarea одним з наступних варіантів:
// список елементів autosize (document.querySelectorAll ( 'textarea')); // один елемент autosize (document.querySelector ( 'textarea')); // jQuery елементи autosize ($ ( 'textarea'));Підтримка браузерів:
Chrome Firefox IE Safari iOS Safari Android Opera Mini yes yes 9 yes yes 4? менюВаріант 2: авто-розтягування textarea (jQuery плагін)
Якщо у вас на сайті встановлена бібліотека jQuery, то рекомендую хороший плагін для автоматичного розтягування textarea.
Поділюся відразу стислій версією коду плагіна:
/ * * JQuery autoResize (textarea auto-resizer) * @copyright James Padolsey http://james.padolsey.com * @version 1.04.1 (kama fix) * / (function (b) {b.fn.autoResize = function (f) {var a = b.extend ({onResize: function () {}, animate:! 0, animateDuration: 150, animateCallback: function () {}, extraSpace: 20, limit: 1E3}, f); this .filter ( "textarea"). each (function () {var d = b (this) .css ({ "overflow-y": "hidden", display: "block"}), f = d.height () , g = function () {var c = {}; b.each ([ "height", "width", "lineHeight", "textDecoration", "letterSpacing"], function (b, a) {c [a] = d.css (a)}); return d.clone (). removeAttr ( "id"). removeAttr ( "name"). css ({position: "absolute", top: 0, left: -9999}) .css (c) .attr ( "tabIndex", "- 1"). insertBefore (d)} (), h = null, e = function () {g.height (0) .val (b (this). val ()). scrollTop (1E4); var c = Math.max (g.scrollTop (), f) + a.extraSpace, e = b (this) .add (g); h! == c && (h = c, c> = a.limit? b (this) .css ( "overflow-y", "") :( a.onResize.call (this), a.animate && "block" === d.css ( " display ")? e.stop (). animate ({height: c}, a.animateDuration, a.animateCallback): e.height (c))) }; D.unbind ( ". DynSiz"). Bind ( "keyup.dynSiz", e) .bind ( "keydown.dynSiz", e) .bind ( "change.dynSiz", e)}); return this} }) (jQuery); // ініціалізація jQuery (function () {jQuery ( 'textarea'). AutoResize ();});Після установки цього коду, все textarea повинні автоматично розтягуватися.
Підтримка браузерів:
- IE 6-8
- Firefox 3.5
- Opera 9.5-10
- Safari 3
- Chrome 10
Під час тестування з'ясував, що у textarea обов'язково повинно бути встановлено css властивість display: block, інакше ніяка анімація в плагіні не працювала (браузер chrome). Тому додав в плагін пару рядків коду, щоб він сам встановлював це властивість. Також, в деяких браузерах є можливість змінювати розмір поля вручну (в кутку трикутничок), плагін цю можливість для чогось прибирав, я її повернув. Тому в заголовку @version 1.04.1 (kama fix)
Незжата версія коду плагіна:
/ * * JQuery autoResize (textarea auto-resizer) * @copyright James Padolsey http://james.padolsey.com * @version 1.04.1 (kama fix) * / (function ($) {$ .fn.autoResize = function (options) {// Just some abstracted details, // to make plugin users happy: var settings = $ .extend ({onResize: function () {}, animate: true, animateDuration: 150, animateCallback: function () {} , extraSpace: 20, limit 1000}, options); // Only textarea's auto-resize: this.filter ( 'textarea'). each (function () {// Get rid of scrollbars and disable WebKit resizing: var textarea = $ (this) .css ({ 'overflow-y': 'hidden', display: 'block'}), // Cache original height, for use later: origHeight = textarea.height (), // Need clone of textarea , hidden off screen: clone = (function () {// Properties which may effect space taken up by chracters: var props = [ 'height', 'width', 'lineHeight', 'textDecoration', 'letterSpacing'], propOb = {}; // Create object of styles to apply: $ .each (props, function (i, prop) {propOb [prop] = textarea.css ( prop); }); // Clone the actual textarea removing unique properties // and insert before original textarea: return textarea.clone (). RemoveAttr ( 'id'). RemoveAttr ( 'name'). Css ({position: 'absolute', top: 0 , left: -9999}). css (propOb) .attr ( 'tabIndex', '- 1'). insertBefore (textarea); }) (), LastScrollTop = null, updateSize = function () {// Prepare the clone: clone.height (0) .val ($ (this) .val ()). ScrollTop (10000); // Find the height of text: var scrollTop = Math.max (clone.scrollTop (), origHeight) + settings.extraSpace, toChange = $ (this) .add (clone); // Do not do anything if scrollTip hasen't changed: if (lastScrollTop === scrollTop) {return; } LastScrollTop = scrollTop; // Check for limit: if (scrollTop> = settings.limit) {$ (this) .css ( 'overflow-y', ''); return; } // Fire off callback: settings.onResize.call (this); // Either animate or directly apply height: settings.animate && textarea.css ( 'display') === 'block'? toChange.stop (). animate ({height: scrollTop}, settings.animateDuration, settings.animateCallback): toChange.height (scrollTop); }; // Bind namespaced handlers to appropriate events: textarea .unbind ( '. DynSiz') .bind ( 'keyup.dynSiz', updateSize) .bind ( 'keydown.dynSiz', updateSize) .bind ( 'change.dynSiz', updateSize ); }); // Chain: return this; }; }) (JQuery);Налаштування плагіна
Під час ініціалізації плагіну можна встановити деякі параметри.
1. Приберемо відступ знизу, за замовчуванням він дорівнює 20 пікселів:
jQuery ( 'textarea'). autoResize ({extraSpace: 0});2. Вішаємо дії на події в момент ресайз і після нього - настройки onResize і animateCallback:
jQuery ( 'textarea'). autoResize ({// Під час ресайз: onResize: function () {jQuery (this) .css ({color: '# 666', background: '# eee'});}, // після ресайз: animateCallback: function () {jQuery (this) .css ({color: '# 222', background: '# fff'});}});всі настройки
onResize (функція) Функція викликається в момент зміни розміру textarea. Передає об'єкт textarea, тобто в функції "this" буде робочий textarea. animate (логічний) Чи включена анімація зміни висоти. true - включена.За замовчуванням: true animateDuration (число) Час, який займає анімація в мілісекундах.
За замовчуванням: 150 animateCallback (функція) Викликається при закінченні анімації. extraSpace (число) Відступ у textarea знизу в пікселях.
За замовчуванням: 20 limit (число) Максимальна висота textarea в пікселях. Вище з'явиться скролл.
За замовчуванням 1000 меню
Варіант 3: авто-розтягування textarea (мій старий скрипт)
Так склалося, що перша версія скрипта для автоматичного розтягування поля коментаря в WordPress виявилася не найкращою 
. Коли я її тестував чомусь не помітив баг, який полягав в тому, що при сильному розтягуванні поля, екран починав стрибати вгору при натисканні на будь-яку клавішу, в результаті великої коментар залишити взагалі не представлялося можливим 
. Крім цього, в IE 8 скрипт гальмував.
Загалом, провівши не одну годину в спробах полагодити скрипт, я зрозумів, що зробити це неможливо - треба щось кардинально міняти. В результаті, почав шукати альтернативне рішення. Траплялися рішення засновані на jQuery, але мені хотілося зробити на чистому JS. Рішення з jQuery я залишив на крайній випадок.
Серфінг вивів мене на рішення, яке мені здалося прийнятним з точки зору зручності. Подивитися на це рішення можете в цієї демке (Може кому стане в нагоді). Трохи подлубавшись зі скриптом, я зрозумів що зробити просту інтеграцію в WordPress не вийде (доведеться доповнювати форму коментування, додавати CSS і звичайно підключати сам Скрипт), а мені хотілося, щоб було так: вставив скрипт і готово. Адже, таке сумнівне юзабіліті не варто зайвих зусиль.
Тому я пішов серфить далі і знайшов цікаву функцію підрахунку рядків, яку і доробив. Результат мене цілком влаштував: погляньте на цю ДЕМО версію .
З плюсів цього варіанту зміни розмірів поля коментування, можна виділити:
- проста інтеграція в шаблон;
- хороший підрахунок висоти;
- не гальмує.
Черговий новий варіант, від 16 грудня 2013 року. Підправив код, виправив баг - код був написаний трохи некоректно і міг навантажувати комп'ютер. Тепер цього немає.
/ ** * Скрипт для автоматичного розтягування поля (Textarea) по вертикалі. * * Для роботи скрипта висота textarea не повинна бути визначена жорстко, тобто * НЕ повинно бути визначено CSS властивість height. Замість height можна * використовувати min-height: 200px; або краще задати висоту через rows = ''. * Також, можна обмежити максимальну висоту розтяжки * через CSS властивістю max-height: 800px; * * Автор: Тимур Камаєв - http://wp-kama.ru * Версія 4.0 * / // настройки var krVar = {// id атрибут тега textarea textareaId: 'comment', // час перерахунку (1000 = 1 сек). repeat: 1000 // коефіцієнт. Збільшите, якщо з'являється прокрутка. cof: 40,} var KR = {timeout: 0, textarea: document.getElementById (krVar.textareaId), init: function () {if (! KR.textarea) return; KR.textarea.onfocus = KR.doit; KR.textarea.onblur = KR.stop; }, Doit: function () {// встановлюємо потрібну кількість рядків KR.textarea.rows = KR.countLines (KR.textarea.value); clearTimeout (KR.timeout); KR.timeout = setTimeout (function () {KR.doit ();}, krVar.repeat); }, Stop: function () {clearTimeout (KR.timeout); }, // функція підрахунку рядків countLines: function (strtocount) {var hard_lines = 0; var str = strtocount.split ( "\ n"); hard_lines = str.length; var tx = KR.textarea; var letter_width = tx.clientHeight / tx.rows * krVar.cof / 100; // приблизна ширина однієї літери в пікселях var chars_in_line = tx.clientWidth / letter_width; // скільки букв в рядку var lines = 0; var temp = 0; // hard_lines-1 = кількість елементів в масиві for (i = 0; i <= (hard_lines-1); i ++) {temp = str [i] .length / chars_in_line; if (temp> 0) lines + = temp; } Return lines + hard_lines; }} If (window.addEventListener) window.addEventListener ( "load", KR.init, false); else if (window.attachEvent) window.attachEvent ( "onload", KR.init);установка скрипта
Скопіюйте вищеописаний код в будь-який вже наявний в шаблоні javascript файл;
Встановіть полю textarea CSS властивість min-height (як це зробити див. Нижче);
- (необов'язково) Якщо не хочете, щоб поле тяглося до нескінченності встановіть йому CSS властивість max-height;
Як вставити скрипт прямо в файл теми:
Якщо js файлу у вас в шаблоні немає, то можна його створити, скопіювати туди код, а потім підключити файл до шаблону.
Або можна просто підключити вище написаний код в ваш файл шаблону single.php, вставивши таку конструкцію в файл:
<Script type = "text / javascript"> / * <! [CDATA [* / Тут код / *]]> * / </ script>Як встановити полю textarea css властивість min-height
Варіант 1: Відкрийте файл comments.php знайдіть там HTML тег textarea і додайте до нього style = 'min-height: 200px; max-height: 700px; '. На вигляд приблизно так:
<Textarea style = "min-height: 200px; max-height: 700px;" rows = "58" name = "comment" id = "comment" tabindex = "4"> </ textarea>max-height: 700px; можна не додавати - це максимальна довжина до якої буде розтягуватися поле.
Варіант 2: Знайдіть у вашому файлі стилів (style.css) клас, який відповідає за поле textarea і додайте до нього CSS властивість min-height: 200px ;. Якщо там присутній властивість height: XXXpx, то його потрібно видалити.
Кілька варіантів як може називатися клас який відповідає за поле:
#commentform textarea #respond textarea #comment textarea # commentТих. подробиці: як працює скрипт
Принцип роботи коду полягає в наступному: коли курсор потрапляє в поле коментування включається періодичний підрахунок рядків (кожні пів секунди), коли курсор виходить з поля, підрахунок рядків зупиняється. Рядки вважаються шляхом суми кількості явних переносів рядка (\ n) і обчислення неявних переносів (коли рядок перекладається на нову через брак ширини поля, над цим моментом довелося битися довго і клопітно).
Принципова різниця з минулим варіантом в тому, що застосовується інша технологія підрахунку рядків і рядки вважаються після натискання клавіші а через якийсь час, в нашому випадку 500 мілісекунд (пів секунди). Інтервал можна збільшити, якщо спостерігаються гальма. У випадках, коли підрахунок висоти вішається на натискання клавіші, всюди спостерігаються гальма, особливо на слабких комп'ютерах і при швидкому друкування.
Якщо виникнуть питання задавайте в коментарях!
Limit?Css ( " display ")?
Css ( 'display') === 'block'?