HTMLInputElement : mthode showPicker()

Syntaxe

showPicker()

Paramtres

Aucun.

Valeur de retour

Aucune (undefined).

Exceptions

InvalidStateError DOMException

Leve si l'lment n'est pas modifiable, c'estdire si l'utilisateurice ne peut pas le modifier et/ou s'il ne peut pas tre prrempli automatiquement.

NotAllowedError DOMException

Leve si la mthode n'est pas dclenche explicitement par une action utilisateurice, telle qu'un geste tactile ou un clic de souris (le slecteur requiert une activation transitoire).

SecurityError DOMException

Leve si appele depuis un cadre intgr d'origine croise, sauf pour les slecteurs de fichiers et de couleurs (exempts pour des raisons historiques).

Scurit

Activation par l'utilisateurice est requise. L'utilisateurice doit interagir avec la page ou un lment d'interface pour que cette fonctionnalit fonctionne.

Exemples

Dtection de fonctionnalit

Le code cidessous montre comment vrifier si showPicker() est pris en charge :

if ("showPicker" in HTMLInputElement.prototype) {
  // showPicker() est pris en charge.
}

Slecteurs normaux d'entre

Cet exemple montre comment utiliser cette fonctionnalit pour les slecteurs color et file.

HTML

<p>
  <input type="color" />
  <button id="color">Afficher le slecteur de couleur</button>
</p>

<p>
  <input type="file" />
  <button id="file">Afficher le slecteur de fichiers</button>
</p>

JavaScript

Le code rcupre simplement l'lment prcdent du bouton slectionn et appelle showPicker() dessus.

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

Rsultat

Cliquez sur le bouton ct de chaque type d'entre pour afficher son slecteur.

showPicker() pour un champ d'entre associ une datalist

showPicker() peut lancer le slecteur pour une liste d'options dfinie dans une <datalist>.

Nous dfinissons d'abord une <datalist> en HTML contenant plusieurs navigateurs, un lment d'entre de formulaire de type text qui l'utilise, et un bouton.

<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>Slectionner un navigateur</button>

Le code cidessous ajoute un couteur d'vnements qui appelle showPicker() lorsque le bouton est cliqu.

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

button.addEventListener("click", () => {
  try {
    browserInput.showPicker();
  } catch (error) {
    // Revenir  un autre mcanisme de slection
  }
});

Comme pour les autres slecteurs, nous ne pouvons pas montrer ce code en cours d'excution comme exemple en direct, car il s'excute dans un cadre d'origine croise et provoquerait une SecurityError.

showPicker() pour l'autocompltion

showPicker() peut afficher un slecteur pour une entre de formulaire ayant l'attribut autocomplete.

Ici, nous dfinissons un lment d'entre de formulaire qui utilise l'option d'autocompltion de  name .

<input autocomplete="name" />
<button>Afficher les options d'autocompltion</button>

Le code cidessous affiche le slecteur pour l'entre de formulaire lorsque le bouton est cliqu.

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

button.addEventListener("click", () => {
  try {
    browserInput.showPicker();
  } catch (error) {
    // Revenir  un autre mcanisme de slection
  }
});

Spcifications

Compatibilit des navigateurs

Voir aussi

• L'lment HTML <input>
• L'interface HTMLInputElement
• La mthode HTMLSelectElement.showPicker()
• L'lment HTML <datalist>
• L'attribut HTML autocomplete