Задача:
Сделать поле ввода комментариев (textarea) на форме так, чтобы его размер (высота) изменялась согласно количеству (строк) текста.
Пользователь может ввести пару слов в одну строку или вставить табличку высотой двадцать строк из экселя — поле ввода должно автоматически увеличиться/уменьшиться.
Длина строк различна (форма резиновая и зависит от размера окна браузера), строки могут переноситься как по \r\n, так и просто, если не вмещаются по ширине.
В принципе, нужна формула подсчёта количества строк текста, чтобы менять атрибут rows у textarea.
Javascript приветствуется. Если решение возможно только средствами html/css, то ещё лучше.
Решения:
Для IE гениальное решение подсказал kosiasik:
Универсальное решение подсказал drJonnie:
Это решение я почти реализовал:
drJonnie привёл своё решение ниже в комментариях
lahmatiy привёл решение с использованием jQuery (пример использования), но я не хотел подключать целый framework ради одной функции
Благодарю всех участников обсуждения.
Сделать поле ввода комментариев (textarea) на форме так, чтобы его размер (высота) изменялась согласно количеству (строк) текста.
Пользователь может ввести пару слов в одну строку или вставить табличку высотой двадцать строк из экселя — поле ввода должно автоматически увеличиться/уменьшиться.
Длина строк различна (форма резиновая и зависит от размера окна браузера), строки могут переноситься как по \r\n, так и просто, если не вмещаются по ширине.
В принципе, нужна формула подсчёта количества строк текста, чтобы менять атрибут rows у textarea.
Javascript приветствуется. Если решение возможно только средствами html/css, то ещё лучше.
Решения:
Для IE гениальное решение подсказал kosiasik:
в стиль textarea прописать overflow:visible
Универсальное решение подсказал drJonnie:
у textarea задается высота в пикселях и вешается событие на нажатие любой клавиши (в том числе и мыши). Это событие каждый раз сравнивает scrollHeight и clientHeight, если первый больше, то обновляется высота у textarea.
Это решение я почти реализовал:
осталось повесить его на события onFocus, onBlur, onKeyPress и т.п., по выборуfunction adjustHeight(textarea){ var dif = textarea.scrollHeight - textarea.clientHeight if (dif){ if (isNaN(parseInt(textarea.style.height))){ textarea.style.height = textarea.scrollHeight + "px" }else{ textarea.style.height = parseInt(textarea.style.height) + dif + "px" } } }
drJonnie привёл своё решение ниже в комментариях
lahmatiy привёл решение с использованием jQuery (пример использования), но я не хотел подключать целый framework ради одной функции
Благодарю всех участников обсуждения.