Изменение размера текстовой области в зависимости от длины содержимого

Мне нужна текстовая область, где я набираю свой текст в поле, он увеличивается по мере необходимости, чтобы избежать необходимости иметь дело с полосами прокрутки, и его необходимо уменьшить после удаления текста! Я не хотел идти по пути mootools или jquery, потому что у меня легкая форма.

Источник

9 ответов

Решение

Вы можете проверить высоту содержимого, установив 1px а затем читать scrollHeight имущество:

function textAreaAdjust(o) {
  o.style.height = "1px";
  o.style.height = (25+o.scrollHeight)+"px";
}
<textarea onkeyup="textAreaAdjust(this)" style="overflow:hidden"></textarea>

Работает под Firefox 3, IE 7, Safari, Opera и Chrome.

Источник

Вы также можете попробовать contenteditable приписать к нормальному p или же div, Не совсем textarea но он будет автоматически изменять размер без скрипта.

<!DOCTYPE html>
<style>
.divtext {
    border: ridge 2px;
    padding: 5px;
    width: 20em;
    min-height: 5em;
    overflow: auto;
}
</style>

<div class="divtext" contentEditable>Hello World</div>
Источник

Реализовано решение jquery, а исходный код доступен на github по адресу: https://github.com/jackmoore/autosize.

Источник

Используйте эту функцию:

function adjustHeight(el){
    el.style.height = (el.scrollHeight > el.clientHeight) ? (el.scrollHeight)+"px" : "60px";
}

Используйте этот HTML:

<textarea onkeyup="adjustHeight(this)"></textarea>

И, наконец, используйте этот CSS:

textarea {
min-height: 60px;
overflow-y: auto;
word-wrap:break-word
}

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

Источник

Ответ Альсиенде не совсем сработал для меня в Safari по какой-либо причине, но сработал после небольшой модификации:

function textAreaAdjust(o) {
    o.style.height = "1px";
    setTimeout(function() {
        o.style.height = (o.scrollHeight)+"px";
    }, 1);
}

Надеюсь, это поможет кому-то

Источник

Я не думаю, что есть какой-либо способ получить ширину текста в шрифтах переменной ширины, особенно в javascript.

Я могу думать только о том, чтобы создать скрытый элемент с переменной шириной, установленной css, поместить текст в его innerHTML и получить ширину этого элемента. Таким образом, вы можете использовать этот метод для решения проблемы автоматического определения размера текстовой области.

Источник

Вы можете достичь этого, используя span и textarea.

Вы должны обновлять диапазон с текстом в textarea каждый раз, когда текст изменяется. Затем установите ширину css и высоту текстовой области в свойствах spanW clientWidth и clientHeight.

Например:

.textArea {
    border: #a9a9a9 1px solid;
    overflow: hidden;
    width:  expression( document.getElementById("spnHidden").clientWidth );
    height: expression( document.getElementById("spnHidden").clientHeight );
}
Источник

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

function changeHeight()
{
var chars_per_row = 100;
var pixles_per_row = 16;
this.style.height = Math.round((this.value.length / chars_per_row) * pixles_per_row) + 'px';
}

Не проверял код.

Источник

Один из способов - сделать это без JavaScript, и это примерно так:

    <textarea style="overflow: visible" />
Источник
Другие вопросы по тегам