HTMLInputElement: 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 explizit durch eine Benutzeraktion wie eine Berührungsgeste oder einen Mausklick ausgelöst (der Picker erfordert Transiente Aktivierung).

SecurityError DOMException

Wird ausgelöst, wenn in einem Cross-Origin-iframe aufgerufen, außer für Datei- und Farb-Picker (aus historischen Gründen ausgenommen).

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

Der folgende Code zeigt, wie überprüft wird, ob showPicker() unterstützt wird:

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

Dieses Beispiel zeigt, wie diese Funktion für color- und file-Eingabe-Picker verwendet werden kann.

HTML

<p>
  <input type="color" />
  <button id="color">Show the color picker</button>
</p>

<p>
  <input type="file" />
  <button id="file">Show the file picker</button>
</p>

JavaScript

Der Code ruft einfach das vorherige Element des ausgewählten Buttons auf und ruft showPicker() darauf auf.

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

Ergebnis

Klicken Sie auf die Schaltfläche neben jedem Eingabetyp, um seinen Picker anzuzeigen.

showPicker() kann den Picker für eine Liste von Optionen starten, die in einem <datalist> definiert sind.

Zuerst definieren wir ein <datalist> in HTML, das aus einer Anzahl von Internetbrowsern besteht, einer Eingabe vom Typ text, die es verwendet, und einem Button.

<datalist id="browsers">
  <option value="Chrome"></option>
  <option value="Firefox"></option>
  <option value="Opera"></option>
  <option value="Safari"></option>
  <option value="Microsoft Edge"></option>
</datalist>

<input type="text" list="browsers" />
<button>Select browser</button>

Der folgende Code fügt einen Ereignis-Listener hinzu, der showPicker() aufruft, wenn der Button geklickt wird.

const button = document.querySelector("button");
const browserInput = document.querySelector("input");

button.addEventListener("click", () => {
  try {
    browserInput.showPicker();
  } catch (error) {
    // Fall back to another picker mechanism
  }
});

showPicker() kann einen Picker für eine autocomplete-Eingabe starten.

Hier definieren wir eine Eingabe, die eine Autocomplete-Option von "name" annimmt.

<input autocomplete="name" /> <button>Show autocomplete options</button>

Der folgende Code zeigt den Picker für die Eingabe, wenn der Button geklickt wird.

const button = document.querySelector("button");
const browserInput = document.querySelector("input");

button.addEventListener("click", () => {
  try {
    browserInput.showPicker();
  } catch (error) {
    // Fall back to another picker mechanism
  }
});

• <input>
• HTMLInputElement
• HTMLSelectElement.showPicker()
• <datalist>
• autocomplete