Есть ли способ заставить текстовую область растягиваться, чтобы соответствовать ее содержимому, без использования PHP или JavaScript?

Question

Я заполняю текстовое поле содержимым, которое пользователь может редактировать.

Можно ли растянуть его так, чтобы он соответствовал контенту с помощью CSS (например, overflow:show для div)?

Answer 1

только одна строка

<textarea name="text" oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'></textarea>

Answer 2

Не совсем. Обычно это делается с помощью JavaScript.

есть хорошее обсуждение способов сделать это здесь ...

Авторазмер текстовой области с использованием прототипа

Answer 3

Вот функция, которая работает с jQuery (только для высоты, а не для ширины):

function setHeight(jq_in){
    jq_in.each(function(index, elem){
        // This line will work with pure Javascript (taken from NicB's answer):
        elem.style.height = elem.scrollHeight+'px'; 
    });
}
setHeight($('<put selector here>'));

Примечание: Оператор попросил решение, которое не использует Javascript, однако это должно быть полезно для многих людей, которые сталкиваются с этим вопросом.

Answer 4

Это очень простое решение, но оно работает для меня:

<!--TEXT-AREA-->
<textarea id="textBox1" name="content" TextMode="MultiLine" onkeyup="setHeight('textBox1');" onkeydown="setHeight('textBox1');">Hello World</textarea>

<!--JAVASCRIPT-->
<script type="text/javascript">
function setHeight(fieldId){
    document.getElementById(fieldId).style.height = document.getElementById(fieldId).scrollHeight+'px';
}
setHeight('textBox1');
</script>