logo

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

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

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

JS
Скопировать код
$('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:

JS
Скопировать код
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' для мгновенного реагирования на изменения:

JS
Скопировать код
$('textarea_id').observe('input', function() {
    this.style.height = 'auto';
    this.style.height = this.shape.scrollbarHeight + 'px';
});

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

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

CSS
Скопировать код
#textarea_id {
    max-height: 300px;
    overflow-y: auto;
}

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

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

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

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

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

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

HTML
Скопировать код
<textarea id="autoExpand" rows="1"></textarea>

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

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

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

JS
Скопировать код
$('autoExpand').observe('input', function(e) {
    this.style.height = 'auto';
    this.style.height = this.shape.scrollbarHeight + "px";
});

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

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

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

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

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

CSS
Скопировать код
#textarea_id {
    padding: 10px;
    resize: vertical;
}

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

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

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

CSS
Скопировать код
#textarea_id, #ghost {
    word-wrap: break-word;
}

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

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

CSS
Скопировать код
#ghost {
    visibility: hidden;
}

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

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