Pull to refresh

Динамически изменяющееся поле ввода текста. Возможно ли такое?

Reading time1 min
Views12K
Задача:
Сделать поле ввода комментариев (textarea) на форме так, чтобы его размер (высота) изменялась согласно количеству (строк) текста.
Пользователь может ввести пару слов в одну строку или вставить табличку высотой двадцать строк из экселя — поле ввода должно автоматически увеличиться/уменьшиться.
Длина строк различна (форма резиновая и зависит от размера окна браузера), строки могут переноситься как по \r\n, так и просто, если не вмещаются по ширине.
В принципе, нужна формула подсчёта количества строк текста, чтобы менять атрибут rows у textarea.

Javascript приветствуется. Если решение возможно только средствами html/css, то ещё лучше.

Решения:
Для IE гениальное решение подсказал kosiasik:
в стиль textarea прописать overflow:visible

Универсальное решение подсказал drJonnie:
у textarea задается высота в пикселях и вешается событие на нажатие любой клавиши (в том числе и мыши). Это событие каждый раз сравнивает scrollHeight и clientHeight, если первый больше, то обновляется высота у textarea.

Это решение я почти реализовал:
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"
        }
    }
}
осталось повесить его на события onFocus, onBlur, onKeyPress и т.п., по выбору
drJonnie привёл своё решение ниже в комментариях
lahmatiy привёл решение с использованием jQuery (пример использования), но я не хотел подключать целый framework ради одной функции
Благодарю всех участников обсуждения.
Tags:
Hubs:
+18
Comments46

Articles

Change theme settings