Завдання:
Зробити поле вводу коментарів (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, onKcePress тощо, за вибором
drJonnie навів своє рішення нижче в коментарях
lahmatiy навів рішення з використанням jQuery (приклад використання), але я не хотів підключати цілий framework заради однієї функції
Дякую всім учасникам обговорення.
