HTMLInputElement: showPicker()-Methode

Syntax

showPicker()

Parameter

Keine.

Rückgabewert

Keine (undefined).

Ausnahmen

InvalidStateError DOMException

Wird ausgelöst, wenn das Element nicht veränderbar ist, d.h. der Benutzer es nicht ändern und/oder nicht automatisch vorab auffüllen kann.

NotAllowedError DOMException

Wird ausgelöst, wenn es nicht explizit durch eine Benutzeraktion wie eine Berührungsgeste oder einen Mausklick ausgelöst wird (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).

Sicherheit

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

Beispiele

Feature-Erkennung

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

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

Normale Eingabe-Picker

Dieses Beispiel zeigt, wie diese Funktion für Farb- und Datei-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 erhält einfach das vorherige Element des ausgewählten Buttons 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() für ein datalist-Eingabe

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, ein Eingabefeld vom Typ text, das es nutzt, und einer Schaltfläche.

<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 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
  }
});

Wie bei den anderen Pickern können wir diesen Code nicht als Live-Beispiel ausführen, da er in einem Cross-Origin-Frame läuft und einen SecurityError verursachen würde.

showPicker() für Autovervollständigung

showPicker() kann einen Picker für ein autocomplete-Eingabefeld starten.

Hier definieren wir eine Eingabe, die eine Autovervollständigungsoption von "name" verwendet.

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

Der folgende Code zeigt den Picker für die Eingabe, 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
  }
});

Spezifikationen

Browser-Kompatibilität

Siehe auch

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