Gibt es eine Möglichkeit, einen Textbereich ohne Verwendung von PHP oder JavaScript an seinen Inhalt anzupassen?

93

Ich fülle einen Textbereich mit Inhalten, die der Benutzer bearbeiten kann.

Ist es möglich, es so zu dehnen, dass es mit CSS übereinstimmt (wie overflow:showbei einem Div)?

html css

— Bedeutung
quelle

1

Hat niemand eine Antwort, die keine Fehler enthält, die kein Framework verwenden? :-(

— starbeamrainbowlabs

Ich benutze einfach die maximale CSS-Breite: 100% und sie passt automatisch in eine Box. Irgendein Problem damit?

— Yashas123

41

Nicht wirklich. Dies geschieht normalerweise mit Javascript.

Hier gibt es eine gute Diskussion darüber, wie dies gemacht werden kann ...

Automatischer Textbereich mit Prototyp

— Rik Heywood
quelle

210

nur eine Zeile

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

— Martin Prestone
quelle

8

wie hat das nur zwei stimmen. Das ist unglaublich, Martin. Ich verbringe nur 30 Minuten damit, dies zu lösen. Gute Arbeit.

— Philip Duffney

30

Das ist toll. Ich möchte nur hinzufügen, dass durch Ändern this.scrollHeight + "px"von this.scrollHeight + 3 + "px"das Textfeld so groß wird, dass die Bildlaufleiste nicht angezeigt wird.

— Maarten

Problem: Wenn der Benutzer genug schreibt, um nach unten zu scrollen, wird die Bildlaufposition jedes Mal zurückgesetzt, wenn er mit Enter eine neue Zeile hinzufügt.

— Costa

5

Ich weiß, dass dies eine alte Frage ist, aber ich habe einen Textbereich auf einer Bearbeitungsseite, der bereits beim Laden der Seite einen Wert hat. Wie kann ich ihn dann erweitern, um ihn an den Inhalt anzupassen?

— Arootin Aghazaryan

1

@ArootinAghazaryan - Möglicherweise haben Sie bereits eine Lösung gefunden, aber für alle anderen: Erstellen Sie einfach eine Funktion mit dem Größenänderungscode, anstatt ihn im HTML-Code inline zu haben. Dann können Sie beim Laden der Seite dieselbe Funktion aufrufen.

— Magnus Eriksson

6

Hier ist eine Funktion, die mit jQuery funktioniert (nur für die Höhe, nicht für die Breite):

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

Hinweis: Die Operation hat nach einer Lösung gefragt, die kein Javascript verwendet. Dies sollte jedoch für viele Personen hilfreich sein, die auf diese Frage stoßen.

— Chris Dutrow
quelle

5

Dies ist eine sehr einfache Lösung, aber sie funktioniert für mich:

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

Erweitern Sie das Snippet

— NicB
quelle

2

Die Höhe der Box nimmt mit jedem Tastendruck zu, nicht nur mit neuen Zeilen. Selbst Rücktaste und Löschen erhöhen die Höhe. Fix, und Sie erhalten die positive Bewertung zurück.

— Birrel

Einige Browser wie IE berechnen die Bildlaufhöhe nicht richtig, was zu solchen Problemen führen kann.

— Egal

1

Hier ist die Lösung (Bearbeitungswarteschlange ist voll):

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

Grundsätzlich müssen Sie die Höhe zuerst auf 1px einstellen, aus diesem Grund: stackoverflow.com/questions/10722058/…

— KthProg

2

Eine weitere einfache Lösung für die dynamische Steuerung von Textbereichen.

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

Erweitern Sie das Snippet

— Krutika Patel
quelle