HTMLSelectElement: showPicker() Methode

Keine.

Keine (undefined).

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 ausdrücklich durch eine Benutzeraktion wie eine Tippgeste oder einen Mausklick ausgelöst (der Auswähler erfordert transiente Aktivierung).

NotSupportedError DOMException

Wird ausgelöst, wenn das mit dem Auswähler verknüpfte Element nicht dargestellt wird.

SecurityError DOMException

Wird ausgelöst, wenn in einem Cross-Origin-Iframe aufgerufen.

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

Die Methode darf nur in Same-Origin-Iframes aufgerufen werden; eine Ausnahme wird ausgelöst, wenn sie in einem Cross-Origin-Iframe aufgerufen wird.

Der unten stehende Code zeigt, wie geprüft werden kann, ob showPicker() unterstützt wird:

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

Dieses Beispiel zeigt, wie Sie mit einer Schaltfläche den Auswähler für ein <select>-Element mit zwei Optionen starten.

HTML

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

JavaScript

Der Code erhält das <button>-Element und fügt einen Listener für sein click-Ereignis hinzu. Der Ereignishandler ruft das <select>-Element ab und ruft showPicker() darauf auf.

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

• <select>
• HTMLSelectElement
• HTMLInputElement.showPicker()