HTMLTextAreaElement.wrap — Eigenschaft · JavaScript-Referenz

Signatur

HTMLTextAreaElement.wrap

Beschreibung

Die Eigenschaft wrap spiegelt das HTML-Attribut wrap eines <textarea>-Elements wider. Sie bestimmt, ob die visuellen Zeilenumbrüche, die der Browser beim Anzeigen langer Zeilen erzeugt, auch in den übertragenen Formularwert übernommen werden.

Zulässige Werte sind:

"soft" (Standard): Der Text wird nur optisch umbrochen. Beim Absenden werden keine zusätzlichen Zeilenumbrüche eingefügt.
"hard": Der Browser fügt beim Absenden an jeder automatischen Umbruchstelle ein CR+LF (\r\n) ein. Damit das funktioniert, muss das Attribut cols gesetzt sein.
"off" (nicht standardisiert, aber weit unterstützt): Es findet kein automatischer Umbruch statt, lange Zeilen erzeugen einen horizontalen Scrollbalken.

Die Eigenschaft ist nützlich, wenn Text in einem festen Zeilenformat an den Server gehen soll – etwa für E-Mail-Texte mit maximal 72 Zeichen pro Zeile oder für Code-Editoren, in denen kein Umbruch erwünscht ist. Wichtig: wrap beeinflusst ausschließlich den übertragenen Formularwert, nicht den Wert von textarea.value im JavaScript.

Parameter

Name	Typ	Default	Beschreibung
$wert	"soft" \| "hard" \| "off" \| string	"" (verhält sich wie "soft")	Beim Setzen: neuer Umbruchmodus. Der Wert wird unverändert ins Attribut `wrap` geschrieben; ungültige Werte werden wie `"soft"` behandelt.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Inhalt des wrap-Attributs. Ist das Attribut nicht gesetzt, wird ein leerer String "" zurückgegeben (nicht "soft").

Beispiele

Umbruchmodus auslesen

// HTML: <textarea id="nachricht" cols="40" wrap="hard"></textarea>
const textarea = document.querySelector('#nachricht');
console.log(textarea.wrap);

// Ohne Attribut gesetzt:
const leer = document.createElement('textarea');
console.log(JSON.stringify(leer.wrap));

hard ""

Harten Umbruch für E-Mail-Text aktivieren

const mailText = document.createElement('textarea');
mailText.name = 'body';
mailText.cols = 72;      // Pflicht für wrap="hard"
mailText.wrap = 'hard';  // Umbrüche werden beim Absenden eingefügt
document.querySelector('form').append(mailText);

console.log(mailText.outerHTML);

Zeilenumbruch in einem Code-Feld umschalten

const editor = document.querySelector('#code-editor');
const toggle = document.querySelector('#umbruch-toggle'); // Checkbox

toggle.addEventListener('change', () => {
  // 'off' = horizontal scrollen, 'soft' = optisch umbrechen
  editor.wrap = toggle.checked ? 'soft' : 'off';
  console.log(`Umbruchmodus: ${editor.wrap}`);
});

Umbruchmodus: off

// Wichtig · Fallstricke

cols ist Pflicht für "hard": Ohne cols-Attribut hat wrap="hard" keine Wirkung – die Breite per CSS reicht nicht.
value bleibt unverändert: Die harten Umbrüche werden erst beim Serialisieren des Formulars (Absenden, new FormData(form)) eingefügt. textarea.value enthält sie nicht.
Leerer String statt Standardwert: Ohne Attribut liefert der Getter "". Prüfe daher auf wrap === 'hard' statt auf 'soft'.
"off" ist nicht standardisiert: Der Wert wird zwar von allen großen Browsern unterstützt, laut Spezifikation ist aber das CSS white-space: pre bzw. text-wrap: nowrap die saubere Alternative.
Kompatibilität: Die DOM-Eigenschaft ist in Chrome, Edge, Firefox und Safari verfügbar (Firefox seit Version 4, Safari seit 5 bzw. vollständig seit neueren Versionen); das HTML-Attribut funktioniert noch deutlich länger.

Siehe auch

HTMLAreaElement.shape HTMLProgressElement.max HTMLTextAreaElement.cols HTMLTextAreaElement.form HTMLTextAreaElement.name