Растягивающаяся textarea
Недавно наткнулся на интересную идею – как растягивать текстовое поле (textarea) в зависимости от контента в нем. дея очень проста, поэтому не могу не поделится ее с вами.
Но раскрою карты не стразу, сначала расскажу как я это делал раньше и укажу проблемы которые при этом всплывают, может вы делали также, и теперь ошибок не повторите.
Способ №1: считать количество символов в тестовом поле… но проблема была с переводами строк, размером и типом шрифта, короче метод хардкодный.
Способ №2: тоже узнал недавно, изначально показалось прикольным методом… вставить HTML элемент одинаковой ширины с текстовым полем и при изменении в textarea вставлять контент в этот элемент, смотреть его высоту и соответственно менять высоту у текстового поля, все хорошо да только нужно свойство white-space:pre для отображения в этом элементе перевода строки, но из-за этого длинные строки в элементе не переносятся, поэтому высота не корректна.
Ну а теперь новый метод: очень простой, даже обидно, почему я раньше не догадался… При вводе текста в textarea смотреть его текущую высоту и высоту скролящей области, если она больше, то добавлять к атрибуту rows единичку.
Пример работы нового метода:
Вы можете открыть пример в новом окне.
Код примера:
{
// инициализация объекта
var _txt = document.getElementById('textarea');
var _minRows = 3; // минимальное количество строк
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);
Данный код не является полноценным скриптом при ресайзе textarea, а показывает лишь метод растягивания. Но скрипт можно использовать и доработать под свои нужды… В примере textarea увеличивается и уменьшается в зависимости от контента.
8 Коментариев to Растягивающаяся textarea
Оставить сообщение
Метки
Рубрики
- Browsers (2)
- CSS (2)
- HTML (6)
- JavaScript (30)
- jQuery (17)
- JS Plugins (21)
- Mootools (3)
- off-topic (2)
- Prototype (1)
- WordPress (1)
- WP Plugins (1)
- Верстка (2)
- Методики (5)
- Полезные ссылки (6)
впрямь, жесть! Только не забудьте убрать в css высоту с textarea, если она задана :)
не во всех браузерах отработает как надо. некоторые не уменьшают scrollHeight при уменьшении контента. в некоторых это вообше не работает. а в каком то вроде и вовсе только при помощи первого варианта (вроде опера какая-та). уже не помню как делал но одним методом точно не обойтись.
А ты попробуй под мозилой. у меня 3.0.10 и некорректно работает
Да в скрипте есть пару багов, скоро руки дойдут до апдейта следующей версии.
Спасибо тебе чувак! За проделанную работу. Лиса 3,6, хром и опера все норм понимают, а мне больше и не надо.
можно упростить:
{
txt = document.getElementById('textarea');
txt.rows = 3;
while (txt.clientHeight < txt.scrollHeight) { txt.rows += 1; }
}
textarea id=”textarea” style=”overflow:hidden” rows=”3″ onkeyup=”setRows()”
text…
textarea
В IE не пашет