Автоматическое растягивание поля (textarea) комментария
Это решение я забраковал. Другое, лучшее решение находится здесь: Автоматическое растягивание поля (textarea) комментария (версия 2)
Создал дед поле textarea и задал ему определенную высоту, а так же id='comment'
, а затем и говорит, - "напишу-ка я первый комментарий, да так и сделал". Комментарий рос и ширился, большой и красивый и в итоге стал больше чем textarea. Решил дед вытянуть textarea: тянет-потянет, вытянуть не может. Позвал дед бабку: тянут-потянут, вытянуть не могут. Позвали они внучку, а потом и жучку - false! Уже отчаявшись, позвал дед программиста, который написал простенький javascript и не просто вытянул textarea, а еще сделал так, чтобы поле само вытягивалось при каждом большом и красивом комментарие.
Такая вот идиотская метафора почему-то пришла мне в голову, когда я начал писать этот пост. А теперь, объясню нормально
Все вы наверняка видели формы комментария, которые можно растягивать (тянутся вниз). Мне такая практика кажется очень удобной, если пишешь большой комментарий и он не помещается в форму, то появляется скроллинг, особенно неудобно, мне это показалось, когда в комментарий вставляешь какие-нибудь коды. Так, отвечая на один из комментариев на этом блоге я задался целью сделать поле куда пишется комментарий растягивающимся в высоту, при этом чтобы оно тянулось автоматически, если текст не помещается в поле.
Решением стал такой javascript, автором которого является web-технолог:
function flexibleTextarea(){ var _txt = document.getElementById('comment'); // здесь comment - это идентификатор поля, которое будет растягиваться. var _minRows = 7; // минимальное количество строк (высота поля) if (_txt) { // функция расчета строк function setRows() { _txt.rows = _minRows; // минимальное количество строк // цикл проверки вместимости контента do { if (_txt.clientHeight != _txt.scrollHeight) _txt.rows += 1; } while (_txt.clientHeight < _txt.scrollHeight); } setRows(); _txt.rows = _minRows; // пересчет строк в зависимости от набранного контента _txt.onkeyup = function(){ setRows(); } } } if (window.addEventListener) window.addEventListener("load", flexibleTextarea, false); else if (window.attachEvent) window.attachEvent("onload", flexibleTextarea);
Установка скрипта
Чтобы подключить скрипт, нужно скопировать его в какой нибудь js файл вашего сайта или создать отдельный, например, myjs.js файл (скопировать туда код) и подключить его в шаблоне так (подключается в head часть):
<script type='text/javascript' src='http://example.com/<путь до созданного файла>/myjs.js'></script>
Но лучше все же внедрить код в какой-нибудь уже имеющийся js файл - экономия одного запроса к серверу никогда не будет лишней.
Настройка скрипта
Возможно нужно будет настроить параметр _minRows - это высота поля, куда вводится комментарий.
Также если вдруг идентификатор поля комментария у вас отличается от comment
(это стандартный id в WordPress), то измените его в этой строчке:
var _txt = document.getElementById('comment')
Пример работы этого скрипта можете наблюдать на этом блоге в форме комментирования.
- Блокируем Спам в комментариях
- Меняем HTML символы (< >) на спецсимволы при комментировании
- Функция для вывода последних комментариев
Очень полезный скриптик, спасибо.
А вы на всех браузерах его пытали? В Google Chrome всё отлично работает, а вот в IE8 кривовато - тормозит страшно при расширении поля и если оно уже далеко вниз ушло, то при ещё большем расширении курсор к началу формы комментирования переносится.
Да, действительно, скрипт недоделанный.
Сегодня провел несколько часов в попытках починить его, выяснилось, что сделать это крайне не просто. Я бы даже сказал невозможно, если учитывать что нужна кросбраузерность. В нем базовый параметр (на котором строится сам скрипт) scrollHeight имеет разное значение в разных браузерах.
Уже сделал скрипт, который работает по другому принципу, только что доделал. Скоро выложу в виде очередной статьи.
П.С. Этим скриптом пользоваться не особо советую
Спасибо большое!!!
Все работает крссбраузерно.
В ИЕ немного неправильно растягивает - всегда чуть разный размер.
Но в целом - это самое лучшее решения что я нашел в интернете без использования библиотек.
Спасибо!!!
Приятно слышать такие отзывы. Меня тоже устраивает этот вариант, если отбросить всякие библиотеки.