Как автоматически изменить размер текстовой области с помощью Prototype?
Одно из усовершенствований .js некоторых из этих ответов textarea - позволить CSS выполнять ecmascript большую часть работы.
Основной prototype.js маршрут выглядит так:
- Создайте элемент контейнера для хранения
textarea
и скрытогоdiv
- Используя Javascript, синхронизируйте содержимое
textarea
сdiv
- Позвольте браузеру вычислить высоту этого div.
- Поскольку браузер обрабатывает отображение / изменение размера скрытого
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
2021-12-02T06:43:09+00:00
2022-10-21T18:17:10+00:00
Xobbot
Вопросы с похожей тематикой, как у вопроса:
Как автоматически изменить размер текстовой области с помощью Prototype?
Предупреждение о файлах Cookies
Мы используем файлы cookies для улучшения работы сайта. Оставаясь на нашем сайте, вы соглашаетесь с условиями использования файлов cookies. Чтобы ознакомиться с нашими Положениями о конфиденциальности и об использовании файлов cookie, нажмите здесь.