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 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.
Syntax
showPicker()
Parameter
Keine.
Rückgabewert
Keiner (undefined).
Ausnahmen
InvalidStateErrorDOMException-
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.
NotAllowedErrorDOMException-
Wird ausgelöst, wenn nicht explizit durch eine Benutzeraktion wie eine Berührungsgeste oder Mausklick ausgelöst (der Picker erfordert Transiente Aktivierung).
NotSupportedErrorDOMException-
Wird ausgelöst, wenn das mit dem Picker verbundene Element nicht gerendert wird.
SecurityErrorDOMException-
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:
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 dessen click-Ereignis hinzu.
Der Ereignishandler holt das <select>-Element 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);
}
});
Spezifikationen
| Specification |
|---|
| HTML # dom-select-showpicker |