HTMLSelectElement: showPicker() Methode

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

Die HTMLSelectElement.showPicker() Methode zeigt den Browser-Picker für ein select-Element an.

Dies ist derselbe Picker, der normalerweise angezeigt wird, wenn das Element ausgewählt wird, kann aber durch einen Tastendruck oder eine andere Benutzerinteraktion ausgelöst werden.

In diesem Artikel

Syntax

showPicker()

Parameter

Keine.

Rückgabewert

Keiner (undefined).

Ausnahmen

InvalidStateError DOMException

Wird ausgelöst, wenn das Element nicht veränderbar ist, was bedeutet, dass der Benutzer es nicht ändern kann und/oder es nicht automatisch vorausgefüllt werden kann.

NotAllowedError DOMException

Wird ausgelöst, wenn nicht explizit durch eine Benutzeraktion wie eine Berührungsgeste oder Mausklick ausgelöst (der Picker erfordert Transiente Aktivierung).

NotSupportedError DOMException

Wird ausgelöst, wenn das mit dem Picker verbundene Element nicht gerendert wird.

SecurityError DOMException

Wird ausgelöst, wenn in einem cross-origin iframe aufgerufen.

Sicherheitsüberlegungen

Transiente Benutzeraktivierung ist erforderlich. Der Benutzer muss mit der Seite oder einem UI-Element interagieren, damit diese Funktion funktioniert.

Die Methode darf nur in same-origin iframes aufgerufen werden; eine Ausnahme wird ausgelöst, wenn diese in einem cross-origin iframe aufgerufen wird.

Beispiele

Feature-Erkennung

Der folgende Code zeigt, wie Sie überprüfen können, ob showPicker() unterstützt wird:

js
if ("showPicker" in HTMLSelectElement.prototype) {
  // showPicker() is supported.
}

Starten des Pickers

Dieses Beispiel zeigt, wie Sie einen Button verwenden, um den Picker für ein <select>-Element mit zwei Optionen zu starten.

HTML

html
<p>
  <select>
    <option value="1">One</option>
    <option value="2">Two</option>
  </select>
  <button type="button">Show Picker</button>
</p>

JavaScript

Der Code holt das <button>-Element und fügt einen Listener für dessen click-Ereignis hinzu. Der Ereignishandler holt das <select>-Element und ruft showPicker() darauf auf.

js
const button = document.querySelector("button");
button.addEventListener("click", (event) => {
  const select = event.srcElement.previousElementSibling;
  try {
    select.showPicker();
  } catch (error) {
    window.alert(error);
  }
});

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

HTML DOM API
HTMLSelectElement
Instanzeigenschaften
Instanzmethoden
Vererbung
Verwandte Seiten für HTML DOM
Anleitungen
1. Verwenden von Microtasks in JavaScript mit queueMicrotask()
2. Im Detail: Microtasks und die JavaScript-Laufzeitumgebung