jQuery автоматически изменяет размер предварительно заполненного текстового поля при загрузке

У меня есть текстовое поле, которое создается после успешного вызова AJAX. Он может содержать довольно много текста, и я бы хотел, чтобы его высота устанавливалась автоматически, чтобы весь текст был виден без прокрутки.

Я использую плагин autoResize (http://james.padolsey.com/javascript/jquery-plugin-autoresize/), но он изменяет размер ввода только при вводе пользователем.

Итак, как мне изменить размер текстовой области, чтобы она соответствовала содержащемуся в ней тексту?

Вот код соответствующей функции (тип var может быть «ввод» или «текстовое поле»)

function edit_create_input(name, value, type, autocomplete, autoresize)
    {
    var input=$('<' + type + ' class="edit-"' + name + '  name="'+name+'">').val(value); 
    if (autocomplete)
        {
        input.autocomplete("ajax.autosuggest.php",{'multiple':true});
        }
    if (autoresize)
        {
        input.autoResize();
        }
    return input;

javascript jquery autoresize textarea
person sbichenko    schedule 25.11.2011    source источник
comment
Можете ли вы показать нам свой текущий исходный код? Иногда откладывает раствор перед глазами. Всегда помните поговорку: картинка говорит больше, чем тысяча слов.   -  person Reporter    schedule 25.11.2011
comment
Возможно, корректировка кода плагина? Код довольно простой и не очень длинный.   -  person GG.    schedule 25.11.2011
comment
Я добавил соответствующую часть моего кода. К сожалению, я не очень хорошо разбираюсь в JS и jQuery, поэтому в данный момент модификация кода плагина для меня слишком сложна.   -  person sbichenko    schedule 25.11.2011

Ответы (1)


arrow_upward
3
arrow_downward

В исходном коде плагина есть 3 события, при которых срабатывает функция updateSize():

// Bind namespaced handlers to appropriate events:
textarea
    .unbind('.dynSiz')
    .bind('keyup.dynSiz', updateSize)
    .bind('keydown.dynSiz', updateSize)
    .bind('change.dynSiz', updateSize);

Вы должны активировать один из них после того, как ajax загрузит содержимое:

$("#my_textarea").trigger('change.dynSiz');

Изменить: в соответствии с вашим кодом

// ...
if (autoresize)
{
    input.autoResize();
    input.trigger('change.dynSiz');
}
// ...

Примечание. использование .trigger() с событием в пространстве имен более удобно, поскольку использование .change() (что тоже хорошо) вызовет каждое событие изменения, связанное с объектом, а не только то, которое вы необходимость.

Обновление: старый исходный код плагина больше недоступен, я смог найти только слегка измененную версию оригинального здесь.

person aorcsik    schedule 25.11.2011
comment
Кажется, это не работает. Может ли это быть из-за того, что в данный момент элемент на самом деле не находится в DOM? РЕДАКТИРОВАТЬ: Нет, даже если я попробую это после того, как элемент фактически добавлен, он все равно не работает. Я пытался протестировать это в jFiddle, но не смог заставить его там работать. - person sbichenko; 25.11.2011
comment
На главной странице плагина есть комментарий (на самом деле последний), где кто-то хочет сделать именно то, что вы хотите, он просто использует .keydown() для запуска события. Не могли бы вы связать свою скрипку? - person aorcsik; 25.11.2011
comment
Я это сделал! Оказывается, у нас были разные исходные коды (у меня был более новый, с github.com/padolsey/jQuery. .fn.autoResize). У него были разные триггеры, так что .trigger('change.autoResize') сделал это за меня! Тем не менее, мне это кажется чем-то вроде взлома, поэтому я собираюсь немного подождать другого ответа, прежде чем принять этот. - person sbichenko; 25.11.2011
comment
На самом деле эмуляция пользовательского события — это скорее уловка, чем хак, привыкайте к этому ;) Рад, что смог помочь! Ваше здоровье! - person aorcsik; 25.11.2011
comment
Есть идеи, куда делся этот плагин? На github Джеймса Падолси, похоже, его нет, и эта ссылка возвращает a 404. Фактический источник все еще находится на его сайте, но похоже это устаревшая версия. - person spinningarrow; 14.08.2012
comment
Плагин в настоящее время находится здесь: james.padolsey.com/demos /plugins/jQuery/autoresize.jquery.js/ - person chocolata; 06.06.2013
comment
Сейчас ссылка снова не работает. - person Diego Barros; 01.08.2015
comment
@dbarros Спасибо. Я не смог найти оригинал, но немного измененную версию. Смотрите обновление. - person aorcsik; 01.08.2015