Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
HTMLSelectElement: showPicker() Methode
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
DieHTMLSelectElement.showPicker() Methode zeigt den Browser-Picker für einselect-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.
Syntax
showPicker()Parameter
Keine.
Rückgabewert
Keiner (undefined).
Ausnahmen
InvalidStateErrorDOMExceptionWird 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.
NotAllowedErrorDOMExceptionWird ausgelöst, wenn nicht explizit durch eine Benutzeraktion wie eine Berührungsgeste oder Mausklick ausgelöst (der Picker erfordertTransiente Aktivierung).
NotSupportedErrorDOMExceptionWird ausgelöst, wenn das mit dem Picker verbundene Element nicht gerendert wird.
SecurityErrorDOMExceptionWird 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, obshowPicker() unterstützt wird:
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
<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 dessenclick-Ereignis hinzu.Der Ereignishandler holt das<select>-Element und ruftshowPicker() darauf auf.
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 |