Signatur
Beschreibung
Die Eigenschaft placeholder spiegelt das gleichnamige HTML-Attribut eines <input>-Elements wider. Sie enthält einen kurzen Hinweistext, zum Beispiel ein Beispielformat wie „name@beispiel.de“. Der Browser zeigt ihn im Feld an, solange noch kein Wert eingegeben wurde. Sobald der Wert nicht mehr leer ist, verschwindet der Platzhalter.
Die Eigenschaft ist lesbar und schreibbar. Beim Setzen wird das Attribut placeholder im DOM aktualisiert. Beim Lesen erhält man den Attributwert als Zeichenkette oder "", wenn kein Attribut vorhanden ist. Zeilenumbrüche (CR/LF) im Wert werden bei der Darstellung entfernt.
Wirkung hat placeholder nur bei textartigen Eingabetypen: text, search, url, tel, email, password und number. Bei anderen Typen wie checkbox, date oder range wird der Wert zwar gespeichert, aber nicht angezeigt.
Wichtig: Ein Platzhalter ist kein Ersatz für ein <label>. Er verschwindet bei der Eingabe, hat oft geringen Kontrast und wird von Screenreadern nicht zuverlässig vorgelesen. Nutze ihn nur für ergänzende Hinweise.
Rückgabewert
"", wenn kein placeholder-Attribut gesetzt ist. Beim Zuweisen wird der Wert in eine Zeichenkette umgewandelt.Beispiele
Platzhalter lesen und setzen
// HTML: <input id="email" type="email" placeholder="name@beispiel.de">
const input = document.querySelector('#email');
console.log(input.placeholder);
input.placeholder = 'z. B. max@firma.de';
console.log(input.getAttribute('placeholder'));Platzhalter abhängig von einer Auswahl anpassen
// HTML:
// <select id="kontaktart"><option value="email">E-Mail</option><option value="tel">Telefon</option></select>
// <input id="kontakt" type="email">
const select = document.querySelector('#kontaktart');
const kontakt = document.querySelector('#kontakt');
const hinweise = {
email: { type: 'email', placeholder: 'name@beispiel.de' },
tel: { type: 'tel', placeholder: '+49 30 1234567' },
};
const aktualisieren = () => {
const { type, placeholder } = hinweise[select.value];
kontakt.type = type;
kontakt.placeholder = placeholder;
};
select.addEventListener('change', aktualisieren);
aktualisieren();
console.log(kontakt.placeholder);Platzhalter entfernen und prüfen, ob er gerade angezeigt wird
const input = document.createElement('input');
input.placeholder = 'Suchbegriff …';
document.body.append(input);
// :placeholder-shown trifft zu, solange das Feld leer ist
console.log(input.matches(':placeholder-shown'));
input.value = 'JavaScript';
console.log(input.matches(':placeholder-shown'));
// Leerer String entfernt nicht das Attribut – dafür removeAttribute nutzen
input.placeholder = '';
console.log(input.hasAttribute('placeholder'));
input.removeAttribute('placeholder');
console.log(input.placeholder === '');// Wichtig · Fallstricke
- Barrierefreiheit: Verwende
placeholdernie als einzige Beschriftung. Ein sichtbares<label>oder einaria-labelist Pflicht. Der Platzhaltertext hat standardmäßig oft zu wenig Kontrast (WCAG). Mit::placeholderlässt er sich per CSS gestalten. - Kein Vorgabewert: Der Platzhalter wird nicht mit dem Formular übertragen und ist nicht
value. Ein Feld mitrequiredbleibt ungültig, auch wenn ein Platzhalter angezeigt wird. - Nicht unterstützte Typen: Bei
date,color,checkbox,fileusw. wird der Wert ignoriert. Es gibt keinen Fehler, aber auch keine Anzeige. - Zuweisung:
input.placeholder = nullergibt den Text"null". MitremoveAttribute('placeholder')wird das Attribut sauber entfernt. - Sicherheit: Der Wert wird als reiner Text dargestellt, HTML darin wird nicht interpretiert. Es besteht also kein XSS-Risiko.
- Kompatibilität: Wird von allen modernen Browsern unterstützt. Internet Explorer kennt die Eigenschaft ab Version 10, hat aber Eigenheiten: Der Platzhalter verschwindet dort schon beim Fokus.