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

Odpowiedzi:

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