HTMLInputElement.showPicker() — Methode · JavaScript-Referenz

Signatur

HTMLInputElement.prototype.showPicker()

Beschreibung

Mit showPicker() öffnet man die Auswahloberfläche, die der Browser für ein Eingabefeld mitbringt, direkt aus JavaScript heraus. Das ist nützlich, wenn der native Picker über ein eigenes Bedienelement erreichbar sein soll, etwa über ein Kalender-Symbol, einen gestalteten „Datei auswählen“-Button oder ein Farbfeld. Das eigentliche <input> bleibt dabei die Quelle für den Wert und für die Formularübermittlung.

Die Methode funktioniert bei Typen, die einen Picker haben: date, month, week, time, datetime-local, color und file. Dazu kommen Textfelder wie text, search, url, tel und email, wenn sie über das Attribut list mit einer <datalist> verknüpft sind. Bei Typen ohne Picker passiert nichts.

Es gelten strenge Bedingungen:

Nutzeraktivierung: Der Aufruf braucht eine vorübergehende Nutzeraktivierung (transient user activation). Er muss also direkt aus einem Klick-, Tasten- oder ähnlichen Ereignis kommen. Sonst wird ein NotAllowedError geworfen.
Veränderbares Feld: Das Element darf weder disabled noch readonly sein. Sonst wird ein InvalidStateError geworfen.
Cross-Origin-iframes: In einem iframe von einem anderen Ursprung wird ein SecurityError geworfen. Ausnahme sind die Typen file und color.

Den ausgewählten Wert gibt die Methode nicht zurück. Um ihn zu lesen, reagiert man wie gewohnt auf die Ereignisse input bzw. change des Elements.

Rückgabewert

Typ

void

Beschreibung

Gibt undefined zurück. Den gewählten Wert erhält man über die Ereignisse input/change oder die Eigenschaft value bzw. files.

Beispiele

Datumsauswahl über ein eigenes Kalender-Symbol öffnen

// HTML: <input type="date" id="termin"> <button id="kalender">📅</button>
const terminInput = document.querySelector('#termin');
const kalenderBtn = document.querySelector('#kalender');

kalenderBtn.addEventListener('click', () => {
  try {
    terminInput.showPicker();
  } catch (err) {
    // z. B. NotAllowedError, InvalidStateError oder SecurityError
    console.warn(`Picker nicht verfügbar: ${err.name}`);
    terminInput.focus(); // Rückfall: Feld wenigstens fokussieren
  }
});

terminInput.addEventListener('change', () => {
  console.log('Gewähltes Datum:', terminInput.value);
});

Gewähltes Datum: 2024-05-17

Gestalteter Upload-Button mit verstecktem Datei-Input

// HTML: <input type="file" id="upload" accept="image/*" hidden>
//       <button id="uploadBtn">Bild hochladen</button>
const upload = document.querySelector('#upload');

document.querySelector('#uploadBtn').addEventListener('click', () => {
  // Funktioniert auch bei hidden-Inputs vom Typ file
  if ('showPicker' in HTMLInputElement.prototype) {
    upload.showPicker();
  } else {
    upload.click(); // Rückfall für ältere Browser
  }
});

upload.addEventListener('change', () => {
  const namen = [...upload.files].map((f) => f.name);
  console.log('Ausgewählt:', namen.join(', '));
});

Ausgewählt: urlaub.jpg

Datalist-Vorschläge beim Fokussieren anzeigen

// HTML:
// <input id="stadt" list="staedte" placeholder="Stadt">
// <datalist id="staedte">
//   <option value="Berlin"><option value="Hamburg"><option value="München">
// </datalist>
const stadt = document.querySelector('#stadt');

// Ein Klick liefert die nötige Nutzeraktivierung
stadt.addEventListener('click', () => {
  try {
    stadt.showPicker();
  } catch {
    // Browser ohne Unterstützung: Vorschläge erscheinen beim Tippen
  }
});

Fehlerfall: Aufruf ohne Nutzeraktivierung

const farbe = document.createElement('input');
farbe.type = 'color';
document.body.append(farbe);

// Direkt beim Laden aufgerufen, ohne Klick
try {
  farbe.showPicker();
} catch (err) {
  console.log(err.name);
}

NotAllowedError

// Wichtig · Fallstricke

Nutzeraktivierung ist Pflicht: Aufrufe in setTimeout, nach einem längeren await oder beim Laden der Seite scheitern meist mit NotAllowedError, weil die Aktivierung nur kurz gilt. Deshalb den Aufruf in try…catch packen.
Weitere Ausnahmen: InvalidStateError bei disabled- oder readonly-Feldern. SecurityError in Cross-Origin-iframes (außer bei file und color). Neuere Chromium-Versionen werfen außerdem einen NotSupportedError, wenn das Element gar nicht dargestellt wird. Datei-Inputs mit hidden bleiben davon ausgenommen.
Kompatibilität: Wird von allen aktuellen Browsern unterstützt (Chrome/Edge 99, Firefox 101, Safari 16). Wie vollständig einzelne Typen unterstützt werden, kann je nach Browser abweichen, etwa bei datalist oder time in Safari und Firefox. Zur Erkennung eignet sich 'showPicker' in HTMLInputElement.prototype. Als Rückfall bei Datei-Inputs dient click().
Kein Rückgabewert: Die Methode wartet nicht darauf, dass der Picker geschlossen wird, und gibt keinen Wert zurück. Den Wert liest man über change/input.
Barrierefreiheit: Das eigentliche Eingabefeld sollte weiterhin per Tastatur erreichbar und beschriftet sein. Ein eigener Auslöser ergänzt die native Bedienung, ersetzt sie aber nicht.
Für <select> gibt es die entsprechende Methode HTMLSelectElement.showPicker(), die jünger ist und seltener unterstützt wird.

Siehe auch

HTMLInputElement.select() HTMLInputElement.stepDown() HTMLInputElement.stepUp() HTMLInputElement.setRangeText() HTMLInputElement.checkValidity()