Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
resizable_textarea = {
cache: [],
resize: function(id){
// наша textarea
var textarea = document.getElementById(id);
var scroll_height = 0;
// получить высоту скролла
// msie вычислите заранее или используйте любой способ опрееделения браузера
// для jQuery: if($.browser.msie)
if(msie){
scroll_height = this.get_ie_scroll_height(id);
}else{
scroll_height = this.get_nonie_scroll_height(id);
}
// если установлена минимальная высота у textarea
var min_height = textarea.style.minHeight;
// если высота скролла меньше минимальной, сделать ее равной минимальной
if(min_height && scroll_height<min_height){
scroll_height = min_height;
}
// обновляем высоту у textarea, если она изменилась или если она не уставлена
if(scroll_height != this.cache[id] || !textarea.style.height){
// пишем новое значение высоты в кэш
this.cache[id] = scroll_height;
// обновляем стиль
textarea.style.height = scroll_height + 'px';
}
// возвращаем высоту (вдруг потребуется)
return scroll_height;
},
_get_nonie_scroll_height: function(id){
// вычисляем скролл хайт для всех не IE браузеров
var textarea = document.getElementById(id);
var value = textarea.value;
var width = textarea.clientWidth;
var scroll_height = 0;
// наша вторая textarea, создать заранее
// у меня создается динамически, если отсутствует, но и так код большой
var dummy = document.getElementById('textarea-dummy')
// меняем в ней значение на введенное и устанавливаем ширину
dummy.value = value;
dummy.style.width = width + 'px';
// получаем скролл хайт
scroll_height = dummy.scrollHeight;
// возвращаем ее
return scroll_height;
},
_get_ie_scroll_height: function(id){
// проще не придумаешь.
return document.getElementById(id).scrollHeight;
}
}
Все, теперь можно использовать:
<textarea onKeyPress="resizable_textarea.resize(this.id)" onClick="resizable_textarea.resize(this.id)">
Ну так вы сначала проверьте, и только затем говорите, что не видите проблемы.
Динамически изменяющееся поле ввода текста. Возможно ли такое?