Comments 46
хм, посмотрите как сделана форма ввода комментов для хабра (скрипт для Greasemonkey)
0
спасибо.
в форме ввода комментов для хабра три строки.
скрипт для Greasemonkey, насколько я помню, позволял пользователю вручную изменять размер поля ввода, это не совсем то, что мне нужно, но как костыль подойдёт. не подскажите ссылочку?
в форме ввода комментов для хабра три строки.
скрипт для Greasemonkey, насколько я помню, позволял пользователю вручную изменять размер поля ввода, это не совсем то, что мне нужно, но как костыль подойдёт. не подскажите ссылочку?
0
Он сам замечательно увеличивает поле.
0
У меня в ФФ 2.0.0.12 поле само не увеличивается.
Как есть три неудобных строки, так и есть. Писать длинные комментарии совсем неудобно.
А может это спецфича: чтобы писали покороче? ;-)
Как есть три неудобных строки, так и есть. Писать длинные комментарии совсем неудобно.
А может это спецфича: чтобы писали покороче? ;-)
0
ФФ 2.0.0.12
Скрипт для Greasemonkey, для комментариев.
Всё замечательно.
Скрины выложить?
Скрипт для Greasemonkey, для комментариев.
Всё замечательно.
Скрины выложить?
0
Тогда вообще парадокс. Одна и та же версия и разное поведение.
0
А у вас скрипт то установлен и Greasemonkey ? :)
0
Нет :) Киньте ссыль на это дело.
Я понял так, что это на хабре скрипт установлен :)
По аналогии как в "гуглендаре" (и вроде аккуноте) сделаны саморасширяющиеся поля.
А если еще надо что-то доставлять, то это не так интересно.
Я понял так, что это на хабре скрипт установлен :)
По аналогии как в "гуглендаре" (и вроде аккуноте) сделаны саморасширяющиеся поля.
А если еще надо что-то доставлять, то это не так интересно.
0
вот: http://habrahabr.ru/blog/i_am_clever/364…
и еще полезная штука: http://hlomzik.habrahabr.ru/blog/37295.h…
встроенное было бы хорошо, но администрации, видимо, не до того.
и еще полезная штука: http://hlomzik.habrahabr.ru/blog/37295.h…
встроенное было бы хорошо, но администрации, видимо, не до того.
0
средствами html/css сделать нельзя
как сделать, не так давно было на хабре http://habrahabr.ru/blog/web_2_0/36694.h…
как сделать, не так давно было на хабре http://habrahabr.ru/blog/web_2_0/36694.h…
+1
Можно создавать див с visibility:hidden, position:absolute с таким же шрифтом и размерами как и текстарея, дублировать там текст и смотреть его offsetHeight когда надо.
Только тут есть нетривиальность с пробелами в конце строки, в диве они переносятся, а в текстарии - нет (есть подозрения что зависит от платформы). Как вариант...
Только тут есть нетривиальность с пробелами в конце строки, в диве они переносятся, а в текстарии - нет (есть подозрения что зависит от платформы). Как вариант...
0
Делается все просто, у textarea задается высота в пикселях и вешается событие на нажатие любой клавиши (в том числе и мыши). Это событие каждый раз сравнивает scrollHeight и clientHeight, если первый больше, то обновляется высота у textarea.
Проблема заключается только в одном: в IE scrollHeight вычисляется в зависимости от содержания и может быть меньше высоты textarea, а в остальных браузерах он всегда или равен, или больше. Поэтому в IE если вы удаляете строки, размер textarea будет уменьшаться, а в других — нет.
Решается это созданием второй скрытой textarea, но с маленькой высотой. При каждом нажатии, мы копируем в нее введенный текст, вычисляем scrollHeight и обновляем первую textarea.
Могу прислать готовый код из одного проекта, просто вставлять в комментарий несколько плохо — он довольно объемный.
Проблема заключается только в одном: в IE scrollHeight вычисляется в зависимости от содержания и может быть меньше высоты textarea, а в остальных браузерах он всегда или равен, или больше. Поэтому в IE если вы удаляете строки, размер textarea будет уменьшаться, а в других — нет.
Решается это созданием второй скрытой textarea, но с маленькой высотой. При каждом нажатии, мы копируем в нее введенный текст, вычисляем scrollHeight и обновляем первую textarea.
Могу прислать готовый код из одного проекта, просто вставлять в комментарий несколько плохо — он довольно объемный.
+1
спасибо, попробую.
у меня IE6, другие браузеры не важны.
думаю, что можно вставить и в комментарий другим пригодится.
у меня IE6, другие браузеры не важны.
думаю, что можно вставить и в комментарий другим пригодится.
0
Прошу прощение за большой комментарий. Habr и pre не дружат. Немного сокращенный вариант рабочего скрипта. Не проверял, поэтому могут быть ошибки.
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)">
0
Давненько использую аналогичный вариант. Вот только он имеет пару недостатков:
1. Увеличенный расход памяти когда мы копируем содержимое одной textarea в "пустышку", во второй это воспринимается как изменение содержимого и стек операций отмены в ней соответственно увеличивается можно понаблюдать в диспетчере задач за увеличением памяти FF. Становится многократно заметно при больших текстах.
2. Скорость работы. При количестве символов примерно более ~15000 каждая подобная процедура заметно подтормаживает и обрабатывать каждое нажатие клавиши становится визуально очень некомфортно быстро набирать и видеть тут же содержимое не получится. Причем это заметно далеко не на самой медленной машине.
1. Увеличенный расход памяти когда мы копируем содержимое одной textarea в "пустышку", во второй это воспринимается как изменение содержимого и стек операций отмены в ней соответственно увеличивается можно понаблюдать в диспетчере задач за увеличением памяти FF. Становится многократно заметно при больших текстах.
2. Скорость работы. При количестве символов примерно более ~15000 каждая подобная процедура заметно подтормаживает и обрабатывать каждое нажатие клавиши становится визуально очень некомфортно быстро набирать и видеть тут же содержимое не получится. Причем это заметно далеко не на самой медленной машине.
0
1. Не проверял, но предполагаю, что можно использовать другой хак для альтернативных браузеров: сперва уменьшить высоту поля на пару пикселей, а потом уже проверять scrollHeight-clientWidth. Память это занимать не должно, но может сказаться на производительности.
0
Увы, такой вариант не пойдет, потому что редактирование текста не всегда заключается в добавлении/удалении 1 символа можно выделить блок и затем удалить.
0
а в чём проблема-то? можно повесить adjustHeight на таймер, чтобы проверял соответствие размерам пару раз в секунду
0
Ну так вы сначала проверьте, и только затем говорите, что не видите проблемы.
Господин drJonnie обрисовал проблему верно: в том же FF свойства textarea'и clientHeight & scrollHeight равнозначны в том случае, если содержимое контента меньше, чем фактическая высота элемента textarea. Поэтому, уменьшая высоту на пару пикселей, вам ничем не поможет.
Возможен вариант такой: уменьшать высоту textarea до 1 пикселя, тут же брать значение scrollHeight и устанавливать style.height в это же значение. Но, увы, без "дерганий" перерисовки даже на достаточно мелком размере textarea не обойтись.
Господин drJonnie обрисовал проблему верно: в том же FF свойства textarea'и clientHeight & scrollHeight равнозначны в том случае, если содержимое контента меньше, чем фактическая высота элемента textarea. Поэтому, уменьшая высоту на пару пикселей, вам ничем не поможет.
Возможен вариант такой: уменьшать высоту textarea до 1 пикселя, тут же брать значение scrollHeight и устанавливать style.height в это же значение. Но, увы, без "дерганий" перерисовки даже на достаточно мелком размере textarea не обойтись.
0
ну я про это и писал, только не до 1 пикселя (возможны дёрганья), а на пару пикселей, проверять, если clientHeight & scrollHeight равнозначны, то дальше уменьшать и т.п. как только дошли до различия (текстовое поле уменьшилось так, что повилась полоса прокрутки), увеличить clientHeight до scrollHeight и радоваться.
0
Да, решение имееет место быть, но мне кажется для какого-то частного случая; надо тестировать. Пока что использую вторую "пустышку" для определения фактической высоты, но со стеком операций отмены "пустышки" пока проблемы. Как и со скоростью при большом контенте приходится использовать таймер. Создавать каждый раз динамически новую textarea тоже нехорошо.
0
Ну так вы сначала проверьте, и только затем говорите, что не видите проблемы.
Если бы вы подробнее описали вашу проблему, сразу бы получили развёрнутый ответ в тему, а то я думал, что проблема в том, что у вас при удалении выделенного блока onKeyPress не срабатывает, потому и предложил таймер
0
Кстати, браузер Safari обладает любопытной особенностью увеличивать textarea по мере ввода.
Это просто ремарка: я понимаю, что вы хотите добиться этого эффекта во всех браузерах.
Это просто ремарка: я понимаю, что вы хотите добиться этого эффекта во всех браузерах.
0
В IE достаточно в стиль textarea прописать overflow:visible ;)
+1
а где бы это вживую посмотреть
0
Давное видел решение на Prototype и Script.aculo.us. Ресайзит плавно и без глюков (не заметил).
решение можно найти тут
решение можно найти тут
0
http://code.google.com/p/jquery-growfield/
Вот, написал тут плагичик. :)
Вот, написал тут плагичик. :)
0
Sign up to leave a comment.
Динамически изменяющееся поле ввода текста. Возможно ли такое?