HTMLInputElement: Methode showPicker()

Keine.

Keine (undefined).

InvalidStateError DOMException

Wird ausgelöst, wenn das Element nicht veränderbar ist, was bedeutet, dass der Benutzer es nicht ändern und/oder es nicht automatisch vorab gefüllt werden kann.

NotAllowedError DOMException

Wird ausgelöst, wenn nicht ausdrücklich durch eine Benutzeraktion wie ein Touch-Geste oder Mausklick ausgelöst (der Picker erfordert flüchtige Aktivierung).

SecurityError DOMException

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

Flüchtige 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 ab und ruft showPicker() darauf auf.

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

Ergebnis

Klicken Sie auf die Schaltfläche neben jedem Eingabetyp, um dessen 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 eine Anzahl von Internet-Browsern, eine Eingabe vom Typ text, die es verwendet, und eine Schaltfläche enthält.

<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 die Schaltfläche angeklickt 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 mit dem Wert "name" annimmt.

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

Der folgende Code zeigt den Picker für die Eingabe an, wenn die Schaltfläche angeklickt 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