HTMLTextAreaElement.placeholder — Eigenschaft · JavaScript-Referenz

Signatur

HTMLTextAreaElement.placeholder

Beschreibung

Die Eigenschaft placeholder des Interfaces HTMLTextAreaElement ist ein Zeichenketten-Wert, der das gleichnamige HTML-Attribut widerspiegelt. Der Text wird im leeren Textfeld in abgeschwächter Darstellung angezeigt und gibt einen kurzen Hinweis darauf, was eingegeben werden soll, etwa ein Beispiel oder das erwartete Format.

Sobald das Feld einen Wert enthält, wird der Platzhalter ausgeblendet. Er ist kein Ersatz für ein <label>: Er verschwindet beim Tippen und wird von Screenreadern nicht zuverlässig vorgelesen. Anders als bei <input> dürfen Zeilenumbrüche (\n bzw. 
 im Attribut) im Platzhalter einer <textarea> vorkommen und werden als Zeilenumbruch dargestellt.

Wenn du die Eigenschaft setzt, wird das Attribut placeholder im DOM aktualisiert. Beim Lesen erhältst du einen leeren String "", falls kein Attribut vorhanden ist. Typische Anwendungen sind dynamische Hinweise, z. B. abhängig von einer Auswahl, Sprache oder einem Zeichenlimit.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Platzhaltertext; ein leerer String "", wenn das Attribut fehlt. Beim Zuweisen wird der Wert in einen String umgewandelt und als Attribut placeholder gesetzt.

Beispiele

Platzhalter lesen und setzen

// HTML: <textarea id="kommentar" placeholder="Dein Kommentar …"></textarea>
const textarea = document.querySelector('#kommentar');

console.log(textarea.placeholder);

textarea.placeholder = 'Schreib uns deine Meinung (max. 500 Zeichen)';
console.log(textarea.getAttribute('placeholder'));

Dein Kommentar … Schreib uns deine Meinung (max. 500 Zeichen)

Platzhalter abhängig von einer Auswahl ändern

// HTML:
// <select id="typ"><option value="bug">Fehler</option><option value="idee">Idee</option></select>
// <textarea id="nachricht"></textarea>
const select = document.querySelector('#typ');
const nachricht = document.querySelector('#nachricht');

const hinweise = {
  bug: 'Beschreibe die Schritte, um den Fehler nachzustellen …',
  idee: 'Welche Funktion wünschst du dir?'
};

const aktualisieren = () => {
  nachricht.placeholder = hinweise[select.value] ?? '';
};

select.addEventListener('change', aktualisieren);
aktualisieren();
console.log(nachricht.placeholder);

Beschreibe die Schritte, um den Fehler nachzustellen …

Mehrzeiliger Platzhalter

const textarea = document.createElement('textarea');
textarea.rows = 4;
textarea.placeholder = 'Adresse:\nStraße Hausnummer\nPLZ Ort';
document.body.append(textarea);

console.log(textarea.placeholder.split('\n').length);

3

Fehlendes Attribut

const leer = document.createElement('textarea');
console.log(JSON.stringify(leer.placeholder));
console.log(leer.hasAttribute('placeholder'));

"" false

// Wichtig · Fallstricke

Barrierefreiheit: Verwende den Platzhalter nicht als einziges Label. Nutze zusätzlich <label for="…"> oder aria-label. Der Platzhalter verschwindet beim Tippen und hat oft einen zu geringen Kontrast.
Kein Wert: Der Platzhalter wird nicht als value übermittelt. textarea.value bleibt "", solange der Nutzer nichts eingibt.
Zeilenumbrüche: In <textarea> werden \n bzw. 
 umgebrochen dargestellt. Bei <input> werden Zeilenumbrüche dagegen entfernt.
Gestaltung: Das Aussehen lässt sich mit dem CSS-Pseudoelement ::placeholder anpassen. Ob der Platzhalter gerade sichtbar ist, prüfst du mit der Pseudoklasse :placeholder-shown.
Sicherheit: Der Wert wird als reiner Text behandelt, HTML darin wird nicht ausgewertet. Die Zuweisung von Nutzereingaben ist daher unbedenklich.
Die Eigenschaft wird von allen modernen Browsern unterstützt. Im Internet Explorer (10/11) verschwand der Platzhalter schon beim Fokussieren, nicht erst beim Tippen.

Siehe auch

ElementInternals.ariaPlaceholder HTMLInputElement.placeholder HTMLTextAreaElement.labels HTMLTextAreaElement.cols HTMLTextAreaElement.value