Чи є спосіб розтягнути текстове поле відповідно до його вмісту без використання PHP або JavaScript?

95

Я наповнюю текстову область вмістом для редагування користувачем.

Чи можна змусити його розтягнутись, щоб вмістити вміст за допомогою CSS (як overflow:showдля div)?

html css

— значення
джерело

1

Хіба ніхто не має відповіді, в якій немає помилок, які не використовують фреймворк? :-(

— starbeamrainbowlabs

Я просто використовую css max-width: 100%, і він автоматично поміщається в коробку. Будь-яка проблема з цим?

— yashas123

42

Не зовсім. Зазвичай це робиться за допомогою JavaScript.

тут добре обговорюють способи зробити це ...

Автоматичний розмір текстової області за допомогою прототипу

— Рік Хейвуд
джерело

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"робить текстову область досить великою, щоб вона не відображала смугу прокрутки.

— marten

Проблема. Коли користувач пише достатньо для прокрутки вниз, він скидає положення прокрутки кожного разу, коли він додає новий рядок за допомогою Enter.

— Коста

5

Я знаю, що це старе запитання, але у мене є текстова область на сторінці редагування, і вона має значення вже при завантаженні сторінки, як я можу змусити її розширитись відповідно до вмісту?

— Arootin Aghazaryan

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

Висота вікна збільшується з кожним натисканням клавіші, а не лише з новими рядками. Навіть зворотний простір і видалення призводять до збільшення висоти. Виправте, і ви повернете голос за.

— 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>

основному ви повинні встановити висоту 1px перше, з - за цього: 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>

Розгорніть фрагмент

— Крутика Патель
джерело