Pull to refresh

Comments 46

хм, посмотрите как сделана форма ввода комментов для хабра (скрипт для Greasemonkey)
спасибо.
в форме ввода комментов для хабра три строки.
скрипт для Greasemonkey, насколько я помню, позволял пользователю вручную изменять размер поля ввода, это не совсем то, что мне нужно, но как костыль подойдёт. не подскажите ссылочку?
Он сам замечательно увеличивает поле.
У меня в ФФ 2.0.0.12 поле само не увеличивается.
Как есть три неудобных строки, так и есть. Писать длинные комментарии совсем неудобно.
А может это спецфича: чтобы писали покороче? ;-)
ФФ 2.0.0.12
Скрипт для Greasemonkey, для комментариев.
Всё замечательно.
Скрины выложить?
Тогда вообще парадокс. Одна и та же версия и разное поведение.
А у вас скрипт то установлен и Greasemonkey ? :)
Нет :) Киньте ссыль на это дело.
Я понял так, что это на хабре скрипт установлен :)
По аналогии как в "гуглендаре" (и вроде аккуноте) сделаны саморасширяющиеся поля.
А если еще надо что-то доставлять, то это не так интересно.
Благодарю!
Надо посмотреть как сделано в гугловском календаре - там эта фича работает сама по себе без доп. плагинов.
спасибо, это то, что нужно
оказалось, что можно, но только в нормальном браузере IE, альтернативные такую фичу не поддерживают (интересно, почему?).
Можно создавать див с visibility:hidden, position:absolute с таким же шрифтом и размерами как и текстарея, дублировать там текст и смотреть его offsetHeight когда надо.
Только тут есть нетривиальность с пробелами в конце строки, в диве они переносятся, а в текстарии - нет (есть подозрения что зависит от платформы). Как вариант...
всё оказалось проще, обновите страницу
Делается все просто, у textarea задается высота в пикселях и вешается событие на нажатие любой клавиши (в том числе и мыши). Это событие каждый раз сравнивает scrollHeight и clientHeight, если первый больше, то обновляется высота у textarea.
Проблема заключается только в одном: в IE scrollHeight вычисляется в зависимости от содержания и может быть меньше высоты textarea, а в остальных браузерах он всегда или равен, или больше. Поэтому в IE если вы удаляете строки, размер textarea будет уменьшаться, а в других — нет.
Решается это созданием второй скрытой textarea, но с маленькой высотой. При каждом нажатии, мы копируем в нее введенный текст, вычисляем scrollHeight и обновляем первую textarea.
Могу прислать готовый код из одного проекта, просто вставлять в комментарий несколько плохо — он довольно объемный.
спасибо, попробую.
у меня IE6, другие браузеры не важны.
думаю, что можно вставить и в комментарий — другим пригодится.
Прошу прощение за большой комментарий. 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)">
Давненько использую аналогичный вариант. Вот только он имеет пару недостатков:
1. Увеличенный расход памяти — когда мы копируем содержимое одной textarea в "пустышку", во второй это воспринимается как изменение содержимого и стек операций отмены в ней соответственно увеличивается — можно понаблюдать в диспетчере задач за увеличением памяти FF. Становится многократно заметно при больших текстах.
2. Скорость работы. При количестве символов примерно более ~15000 каждая подобная процедура заметно подтормаживает и обрабатывать каждое нажатие клавиши становится визуально очень некомфортно — быстро набирать и видеть тут же содержимое не получится. Причем это заметно далеко не на самой медленной машине.
1. Не проверял, но предполагаю, что можно использовать другой хак для альтернативных браузеров: сперва уменьшить высоту поля на пару пикселей, а потом уже проверять scrollHeight-clientWidth. Память это занимать не должно, но может сказаться на производительности.
Увы, такой вариант не пойдет, потому что редактирование текста не всегда заключается в добавлении/удалении 1 символа — можно выделить блок и затем удалить.
а в чём проблема-то? можно повесить adjustHeight на таймер, чтобы проверял соответствие размерам пару раз в секунду
Ну так вы сначала проверьте, и только затем говорите, что не видите проблемы.
Господин drJonnie обрисовал проблему верно: в том же FF свойства textarea'и clientHeight & scrollHeight равнозначны в том случае, если содержимое контента меньше, чем фактическая высота элемента textarea. Поэтому, уменьшая высоту на пару пикселей, вам ничем не поможет.
Возможен вариант такой: уменьшать высоту textarea до 1 пикселя, тут же брать значение scrollHeight и устанавливать style.height в это же значение. Но, увы, без "дерганий" перерисовки даже на достаточно мелком размере textarea не обойтись.
ну я про это и писал, только не до 1 пикселя (возможны дёрганья), а на пару пикселей, проверять, если clientHeight & scrollHeight равнозначны, то дальше уменьшать и т.п. как только дошли до различия (текстовое поле уменьшилось так, что повилась полоса прокрутки), увеличить clientHeight до scrollHeight и радоваться.
Да, решение имееет место быть, но мне кажется для какого-то частного случая; надо тестировать. Пока что использую вторую "пустышку" для определения фактической высоты, но со стеком операций отмены "пустышки" пока проблемы. Как и со скоростью при большом контенте — приходится использовать таймер. Создавать каждый раз динамически новую textarea тоже нехорошо.
Ну так вы сначала проверьте, и только затем говорите, что не видите проблемы.

Если бы вы подробнее описали вашу проблему, сразу бы получили развёрнутый ответ в тему, а то я думал, что проблема в том, что у вас при удалении выделенного блока onKeyPress не срабатывает, потому и предложил таймер
Кстати, браузер Safari обладает любопытной особенностью увеличивать textarea по мере ввода.
Это просто ремарка: я понимаю, что вы хотите добиться этого эффекта во всех браузерах.
мне достаточно только в IE6
за версту чуется рука фанатика ненавистника IE :)
В IE достаточно в стиль textarea прописать overflow:visible ;)
оно от этого автоматом увеличивается?
Или текст начинает наползать на нижележащие элементы?
А попробывать? =)
Нет, ничего там никуда не наползает, до седьмого ИЕ вообще overflow:visible + height:0 служит своеобразным clear после элемента.
заходите ко мне в бюро или по ссылкам выше
Давное видел решение на Prototype и Script.aculo.us. Ресайзит плавно и без глюков (не заметил).
решение можно найти тут
ссылку забыл
http://www.ajaxrussia.com/archives/resizeable-textarea-resizing
>> Сделать поле ввода комментариев (textarea) на форме так, чтобы его размер (высота) изменялась согласно количеству (строк) текста.
Вот живой пример. Использовался js.
Предлагаете зарегистрироваться, чтобы проверить или есть тестовый логин?
Необязательно, я например поправил немного код в Опере:
там где < div id="InputForm" > убрал style="display:none;" и применил. После этого можна смотреть на поле комментирования.
Супер!

p.s. Я просто не думал, что форма ответа так тупо будет скрыта, по этому код даже не смотрел :)
Скачал последнюю версию jQuery и jquery.autogrow.js
В Опере при изменении размеров текст под texteare постоянно дергается.

На приведенном в примере сайте версия скрипта далеко не последняя и таких глюков не наблюдается...
Нифига... старый код на моем сайте тоже приводит к дерганию... Ищу причину...
Нашел! Для textarea необходимо выставить border:
border: 1px solid #000;

например...
http://code.google.com/p/jquery-growfield/

Вот, написал тут плагичик. :)
Sign up to leave a comment.

Articles