Czy istnieje sposób na rozciągnięcie obszaru tekstowego w celu dopasowania do jego zawartości bez używania PHP lub JavaScript?

97

Wypełniam obszar tekstowy treścią do edycji przez użytkownika.

Czy można go rozciągnąć, aby dopasować zawartość do CSS (jak overflow:showw przypadku div)?

html css

— znaczenie
źródło

1

Czy nikt nie ma odpowiedzi, która nie zawiera żadnych błędów, które nie używają frameworka? :-(

— starbeamrainbowlabs

Po prostu używam css max-width: 100% i automatycznie dopasowuje się do pudełka. Masz z tym jakiś problem?

— yashas123

Oto nowoczesne rozwiązanie (wykorzystuje jedną linię JS i trochę kreacji CSS): codepen .

— Oliver

42

Nie całkiem. Zwykle odbywa się to za pomocą javascript.

jest tutaj dobra dyskusja o sposobach zrobienia tego ...

Automatyczny rozmiar obszaru tekstowego przy użyciu Prototype

— Rik Heywood
źródło

219

tylko jedna linia

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

— Martin Prestone
źródło

8

jak to ma tylko dwa głosy. to jest niesamowity Martin. Po prostu spędzam 30 minut próbując rozwiązać ten problem. Świetna robota.

— Philip Duffney,

31

To jest świetne. Chciałbym tylko dodać, że zmiana this.scrollHeight + "px"na this.scrollHeight + 3 + "px"spowoduje, że obszar tekstu będzie wystarczająco duży, aby nie pokazywał paska przewijania.

— maarten

Problem: Kiedy użytkownik pisze wystarczająco dużo, aby przewinąć w dół, resetuje pozycję przewijania za każdym razem, gdy dodaje nowy wiersz za pomocą Enter.

— Costa

5

Wiem, że to stare pytanie, ale mam obszar tekstowy na stronie edycji i ma on wartość już po załadowaniu strony, jak w takim razie mogę go rozszerzyć, aby pasował do treści?

— Arootin Aghazaryan

1

@ArootinAghazaryan - Być może już wymyśliłeś rozwiązanie, ale dla kogokolwiek innego: po prostu utwórz funkcję z kodem zmiany rozmiaru zamiast umieszczać ją w kodzie HTML. Następnie możesz wywołać tę samą funkcję podczas ładowania strony.

— Magnus Eriksson

6

Oto funkcja, która działa z jQuery (tylko dla wysokości, a nie szerokości):

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

Uwaga: operator poprosił o rozwiązanie, które nie korzysta z Javascript, jednak powinno to być pomocne dla wielu osób, które napotkają to pytanie.

— Chris Dutrow
źródło

5

To bardzo proste rozwiązanie, ale na mnie działa:

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

Rozwiń fragment

— NicB
źródło

2

Wysokość pudełka rośnie z każdym naciśnięciem klawisza, a nie tylko z nowymi liniami. Nawet cofanie się i usuwanie powodują wzrost wysokości. Napraw, a odzyskasz głos za.

— Birrel,

niektóre przeglądarki, takie jak IE, nie obliczają całkiem poprawnie wysokości przewijania, co może powodować tego rodzaju problemy. nieważne, że dzieje się to również dla mnie w Chrome ...

— KthProg

1

oto rozwiązanie (kolejka edycji jest pełna): w

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

zasadzie najpierw musisz ustawić wysokość na 1px, z tego powodu: stackoverflow.com/questions/10722058/ ...

— KthProg

3

Kolejne proste rozwiązanie do dynamicznej kontroli obszaru tekstowego.

<!--JAVASCRIPT-->
<script type="text/javascript">
$('textarea').on('input', function () {
            this.style.height = "";
            this.style.height = this.scrollHeight + "px";
 });
</script>

Rozwiń fragment

— Krutika Patel
źródło