Авто-ресайз textarea в Prototype: решение без скролла

Быстрый ответ

Чтобы настроить автоматическое изменение размера textarea с помощью Prototype.js, впишите обработчик события 'keyup':

$('textarea_id').observe('keyup', function(e) {
     e.target.style.height = e.target.shape.scrollbarHeight + 'px';
});

Замените 'textarea_id' на id вашего textarea. Этот код обеспечит автоматическую адаптацию высоты textarea исходя из введённого текста.

Концепция автоматического изменения размеров

Для эффективного изменения размера textarea в ответ на введённое содержание, важно реализовать автоматическую коррекцию высоты без скроллбаров, вне зависимости от того, переводится ли текст на новую строку или превосходит границы поля.

Точное определение высоты

Для точного определения высоты мы синхронизируем textarea с невидимым блоком div, который визуально имитирует textarea. Высота прокрутки этого блока будет служить нам индикатором для установки высоты textarea:

function updateSize(textarea) {
    var ghost = $('ghost');
    ghost.setStyle({
        width: textarea.getWidth() + 'px',
        padding: textarea.getStyle('padding'),
    });

    ghost.update(textarea.value.replace(/\n/g, '<br/>'));
    var newHeight = ghost.shape.scrollbarHeight + 'px';
    textarea.setStyle({ height: newHeight });
}

var ghost = new Element('div', { id: 'ghost' }).setStyle({
    position: 'absolute',
    visibility: 'hidden',
    wordWrap: 'break-word',
    overflow: 'hidden',
}).insertTo(document.body);

$('textarea_id').observe('keyup', function() {
    updateSize(this);
});

Подробнее об этом расскажет наш спикер на видео

Реальное время: корректировка размера

Для коррекции размера в реальном времени мы привязываем обработчик события 'input' для мгновенного реагирования на изменения:

$('textarea_id').observe('input', function() {
    this.style.height = 'auto';
    this.style.height = this.shape.scrollbarHeight + 'px';
});

Установление пределов высоты

Чтобы textarea не становилась чрезмерно большой, назначим ей максимальную высоту:

#textarea_id {
    max-height: 300px;
    overflow-y: auto;
}

Учёт удаления текста

Мы также учитываем операции удаления текста, сбрасывая высоту до auto, что полезно при уменьшении объема текста.

Кроссбраузерность: проверка работы в разных браузерах

Проверьте, как функция автоматического изменения размера работает в различных браузерах.

Визуализация

Для наглядного представления создадим простой пример:

<textarea id="autoExpand" rows="1"></textarea>

Проведите эксперимент с вводом данных и наблюдайте за результатом:

Пустое:   [ ]
Одна строка: [ ]
Две строки: [ ]
Заполнено:   [ ]

С помощью Prototype.js настроим автоматическое изменение размера:

$('autoExpand').observe('input', function(e) {
    this.style.height = 'auto';
    this.style.height = this.shape.scrollbarHeight + "px";
});

Теперь textarea автоматически адаптируется под каждое новое введение текста.

Стилевые рефинменты для удобства использования

Добавим некоторые стилевые уточнения, чтобы использование textarea стало более комфортным.

Отступы и внутреннее пространство

Небольшие отступы добавят нужного пространства внутри textarea:

#textarea_id {
    padding: 10px;
    resize: vertical;
}

Установка вертикального изменения размера помогает сохранить визуальную гармоничность элемента.

Контроль за переносом слов

Сделайте так, чтобы перенос слов в textarea и скрытом блоке происходили одновременно:

#textarea_id, #ghost {
    word-wrap: break-word;
}

Скрытые помощники: блок-призрак

Убедитесь, что невидимый блок спрятан, чтобы он не нарушал структуру документа:

#ghost {
    visibility: hidden;
}

Динамическое изменение размера: гибкость

Мы избегаем явного указания размеров, предоставляя textarea свободу для адаптивного изменения размеров.