HTMLSelectElement : méthode showPicker()

Syntaxe

showPicker()

Paramètres

Aucun.

Valeur de retour

Aucune (undefined).

Exceptions

InvalidStateError DOMException

Levée si l'élément n'est pas modifiable, c'est-à-dire que l'utilisateur·ice ne peut pas le modifier et/ou qu'il ne peut pas être prérempli automatiquement.

NotAllowedError DOMException

Levée si elle n'est pas explicitement déclenchée par une action utilisateur·ice telle qu'un geste tactile ou un clic de souris (le sélecteur requiert une activation transitoire).

NotSupportedError DOMException

Levée si l'élément associé au sélecteur n'est pas affiché.

SecurityError DOMException

Levée si appelée dans un cadre intégré d'origine croisée.

Considérations de sécurité

Une activation utilisateur transitoire est requise. L'utilisateur·ice doit interagir avec la page ou un élément d'interface pour que cette fonctionnalité fonctionne.

La méthode ne peut être appelée que dans des cadres intégrés de même origine ; une exception est levée si elle est appelée dans un cadre intégré d'origine croisée.

Exemples

Détection de fonctionnalité

Le code ci-dessous montre comment vérifier si showPicker() est pris en charge :

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

Lancer le sélecteur

Cet exemple montre comment utiliser un bouton pour lancer le sélecteur pour un élément <select> avec deux options.

HTML

<p>
  <select>
    <option value="1">Un</option>
    <option value="2">Deux</option>
  </select>
  <button type="button">Afficher le sélecteur</button>
</p>

JavaScript

Le code récupère le <button> et ajoute un écouteur pour son évènement click. Le gestionnaire d'évènement récupère l'élément <select> et appelle showPicker() dessus.

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

Spécifications

Compatibilité des navigateurs

Voir aussi

• L'élément HTML <select>
• L'interface HTMLSelectElement
• La méthode HTMLInputElement.showPicker()