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

95

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

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

html css значение
источник
1
Нет ли у кого-нибудь ответа, в котором нет ошибок, без использования фреймворка? :-(
starbeamrainbowlabs
Я просто использую css max-width: 100%, и он автоматически помещается в поле. Есть проблемы с этим?
yashas123

Ответы:

210

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

<textarea name="text" oninput='this.style.height = "";this.style.height = this.scrollHeight + "px"'></textarea>
Мартин Престон
источник
8
как у этого всего два голоса. это невероятный Мартин. Я просто трачу 30 минут на то, чтобы решить эту проблему. Отличная работа.
Филип Даффни
30
Это круто. Я просто хотел бы добавить, что изменение this.scrollHeight + "px"на this.scrollHeight + 3 + "px"делает текстовое поле достаточно большим, чтобы на нем не отображалась полоса прокрутки.
maarten
Проблема: когда пользователь пишет достаточно, чтобы прокрутить вниз, он сбрасывает позицию прокрутки каждый раз, когда он добавляет новую строку с помощью Enter.
Коста
5
Я знаю, что это старый вопрос, но у меня есть текстовое поле на странице редактирования, и оно имеет значение уже при загрузке страницы, как я могу сделать его расширенным, чтобы соответствовать содержимому?
Arootin Aghazaryan 04
1
@ArootinAghazaryan - Возможно, вы уже нашли решение, но для кого-то еще: просто создайте функцию с кодом изменения размера, а не вставляйте его в HTML. Затем вы можете вызвать ту же функцию при загрузке страницы.
Магнус Эрикссон
6

Вот функция, которая работает с 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, однако это должно быть полезно для многих людей, которые сталкиваются с этим вопросом.

Крис Датроу
источник
5

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

<!--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>
Развернуть фрагмент

NicB
источник
2
Высота рамки увеличивается с каждым нажатием клавиши, а не только с новой строкой. Даже backspace и delete вызывают увеличение высоты. Исправьте, и вы вернете свой голос.
Birrel
некоторые браузеры, такие как IE, неправильно вычисляют высоту прокрутки, что может вызвать подобные проблемы. неважно, что это происходит и со мной в Chrome ...
KthProg
1
вот решение (очередь редактирования заполнена): в <style> textarea { resize: none; overflow: auto; } </style> <!--TEXT-AREA--> <textarea onkeyup="setHeight.call(this);">Hello World</textarea> <!--JAVASCRIPT--> <script type="text/javascript"> function setHeight(){ this.style.height = '1px'; this.style.height = this.scrollHeight + 'px'; } </script>основном вам нужно сначала установить высоту на 1 пиксель, из-за этого: stackoverflow.com/questions/10722058/…
KthProg
3

Еще одно простое решение для управления динамическим текстовым полем.

<!--JAVASCRIPT-->
<script type="text/javascript">
$('textarea').on('input', function () {
            this.style.height = "";
            this.style.height = this.scrollHeight + "px";
 });
</script>
Развернуть фрагмент

Крутика Патель
источник