HTMLSelectElement: showPicker() Methode

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Die HTMLSelectElement.showPicker() Methode zeigt den Browserauswähler für ein select-Element an.

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

Syntax

js
showPicker()

Parameter

Keine.

Rückgabewert

Keine (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 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.

Sicherheitsüberlegungen

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.

Beispiele

Funktionserkennung

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

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

Starten des Auswählers

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

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

Spezifikationen

Specification
HTML
# dom-select-showpicker

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
showPicker

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
User must explicitly enable this feature.

Siehe auch