Как автоматически изменить размер текстовой области с помощью Prototype?

Одно из усовершенствований prototype.js некоторых из этих ответов span - позволить CSS выполнять css большую часть работы.

Основной .js маршрут выглядит так:

  1. Создайте элемент контейнера для хранения textarea и скрытого div
  2. Используя Javascript, синхронизируйте содержимое textarea с div
  3. Позвольте браузеру вычислить высоту этого div.
  4. Поскольку браузер обрабатывает отображение / изменение размера скрытого div, мы избегаем явная установка высоты textarea.

document.addEventListener('DOMContentLoaded', () => {
    textArea.addEventListener('change', autosize, false)
    textArea.addEventListener('keydown', autosize, false)
    textArea.addEventListener('keyup', autosize, false)
    autosize()
}, false)

function autosize() {
    // Copy textarea contents to div browser will calculate correct height
    // of copy, which will make overall container taller, which will make
    // textarea taller.
    textCopy.innerHTML = textArea.value.replace(/\n/g, '
') }
html, body, textarea {
    font-family: sans-serif;
    font-size: 14px;
}

.textarea-container {
    position: relative;
}

.textarea-container > div, .textarea-container > textarea {
    word-wrap: break-word; /* make sure the div and the textarea wrap words in the same way */
    box-sizing: border-box;
    padding: 2px;
    width: 100%;
}

.textarea-container > textarea {
    overflow: hidden;
    position: absolute;
    height: 100%;
}

.textarea-container > div {
    padding-bottom: 1.5em; /* A bit more than one additional line of text. */ 
    visibility: hidden;
}

javascript

html

css

textarea

prototypejs

2022-10-21T18:17:10+00:00
Вопросы с похожей тематикой, как у вопроса:

Как автоматически изменить размер текстовой области с помощью Prototype?