Textarea для изменения размера в зависимости от длины содержимого

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

Ответ 1

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

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

<textarea onkeyup="textAreaAdjust(this)" style="overflow:hidden"></textarea>

Ответ 2

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

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

<div class="divtext" contentEditable>Hello World</div>

Ответ 3

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

Ответ 4

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

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
}

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

Ответ 5

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

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

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

Ответ 6

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

    <textarea style="overflow: visible" />

Ответ 7

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

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

Ответ 8

Вы можете достичь этого, используя диапазон и текстовое поле.

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

Например:

.textArea {
    border: #a9a9a9 1px solid;
    overflow: hidden;
    width:  expression( document.getElementById("spnHidden").clientWidth );
    height: expression( document.getElementById("spnHidden").clientHeight );
}

Ответ 9

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

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';
}

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