Автоматическое растягивание поля (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')
Пример работы этого скрипта можете наблюдать на этом блоге в форме комментирования.