Signatur
Beschreibung
Die Eigenschaft type der Schnittstelle HTMLTextAreaElement ist schreibgeschützt und gibt immer den festen String "textarea" zurück. Anders als bei <input> gibt es für <textarea> kein HTML-Attribut type. Der Wert lässt sich also nicht beeinflussen.
Nützlich ist die Eigenschaft vor allem, wenn du Formularelemente einheitlich verarbeitest. Beim Durchlaufen von form.elements kannst du über el.type unterscheiden, ob es sich um ein Textfeld ("text"), eine Checkbox ("checkbox"), eine Auswahlliste ("select-one"/"select-multiple"), einen Button ("submit") oder eben um einen mehrzeiligen Textbereich ("textarea") handelt. Eine eigene Prüfung per tagName oder instanceof brauchst du dafür nicht.
Damit passt HTMLTextAreaElement.type zu den gleichnamigen Eigenschaften von HTMLInputElement, HTMLSelectElement, HTMLButtonElement, HTMLOutputElement ("output") und HTMLFieldSetElement ("fieldset").
Rückgabewert
"textarea".Beispiele
Typ eines Textbereichs auslesen
// HTML: <textarea id="kommentar"></textarea>
const textarea = document.getElementById('kommentar');
console.log(textarea.type);Formularelemente nach Typ verarbeiten
// HTML:
// <form id="kontakt">
// <input name="name" type="text">
// <textarea name="nachricht"></textarea>
// <select name="thema"><option>Support</option></select>
// <button type="submit">Senden</button>
// </form>
const form = document.getElementById('kontakt');
for (const el of form.elements) {
switch (el.type) {
case 'textarea':
// Mehrzeiligen Text normalisieren
el.value = el.value.trim().replace(/\r\n/g, '\n');
console.log(`Textbereich: ${el.name}`);
break;
case 'text':
console.log(`Textfeld: ${el.name}`);
break;
default:
console.log(`Sonstiges (${el.type})`);
}
}Zeichenzähler nur für Textbereiche
document.addEventListener('input', (event) => {
const el = event.target;
if (el.type !== 'textarea') return;
const max = el.maxLength > 0 ? el.maxLength : '∞';
console.log(`${el.value.length} / ${max} Zeichen`);
});Schreibversuch hat keine Wirkung
const ta = document.createElement('textarea');
ta.type = 'text'; // wird ignoriert (im Strict Mode: TypeError)
console.log(ta.type);
console.log(ta.hasAttribute('type'));// Wichtig · Fallstricke
- Schreibgeschützt: Wer
typeeinen Wert zuweist, bewirkt nichts. Im Strict Mode (also auch in ES-Modulen und Klassen) wirft die Zuweisung einenTypeError, weil es nur einen Getter gibt. - Kein HTML-Attribut:
<textarea type="...">ist ungültiges HTML und ändert die Eigenschaft nicht.getAttribute('type')liefert dabei nur den Rohwert des Attributs, nicht"textarea". - Nicht mit
input.typeverwechseln: Bei<input>lässt sichtypelesen und schreiben. Unbekannte Werte fallen dort auf"text"zurück. - Wenn du prüfen willst, ob ein Objekt wirklich ein Textbereich ist, ist
el instanceof HTMLTextAreaElementrobuster. Grund: Auch beliebige andere Objekte können eine Eigenschafttypehaben, etwa Custom Elements oder Event-Objekte. - Kompatibilität: Wird von allen modernen Browsern und seit Langem auch von älteren Browsern unterstützt.