HTMLInputElement : méthode showPicker() - Les API Web | MDN

Basculer la barre latérale

Thème

Automatique
Clair
Sombre

Français

Se souvenir de la langue En savoir plus

HTMLInputElement : méthode showPicker()

Baseline Large disponibilité *

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis septembre 2022.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

La méthode showPicker() de l'interface HTMLInputElement affiche le sélecteur du navigateur pour un élément input.

C'est le même sélecteur qui s'affiche normalement lorsque l'élément a la sélection, mais il peut être déclenché depuis un bouton ou une autre interaction utilisateur·ice.

Les navigateurs implémentent couramment cette fonctionnalité pour les éléments d'entrée de formulaire des types suivants : "date", "month", "week", "time", "datetime-local", "color" ou "file". Il peut aussi être prérempli avec des éléments provenant d'un élément HTML <datalist> ou de l'attribut autocomplete.

De façon générale, cette méthode doit afficher, lorsque cela est possible, le sélecteur pour tout élément d'entrée de formulaire sur la plateforme qui propose un sélecteur.

Dans cet article

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 si l'utilisateur·ice ne peut pas le modifier et/ou s'il ne peut pas être prérempli automatiquement.

NotAllowedError DOMException

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

SecurityError DOMException

Levée si appelée depuis un cadre intégré d'origine croisée, sauf pour les sélecteurs de fichiers et de couleurs (exemptés pour des raisons historiques).

Sécurité

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

Exemples

Détection de fonctionnalité

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

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

Sélecteurs normaux d'entrée

Cet exemple montre comment utiliser cette fonctionnalité pour les sélecteurs color et file.

Note : Les sélecteurs pour date, datetime-local, month, time et week s'ouvrent de la même manière. Ils ne peuvent pas être affichés ici car les exemples en direct s'exécutent dans un cadre intégré d'origine croisée et provoqueraient une SecurityError

HTML

html
<p>
  <input type="color" />
  <button id="color">Afficher le sélecteur de couleur</button>
</p>

<p>
  <input type="file" />
  <button id="file">Afficher le sélecteur de fichiers</button>
</p>

JavaScript

Le code récupère simplement l'élément précédent du bouton sélectionné et appelle showPicker() dessus.

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

Résultat

Cliquez sur le bouton à côté de chaque type d'entrée pour afficher son sélecteur.

showPicker() pour un champ d'entrée associé à une datalist

showPicker() peut lancer le sélecteur pour une liste d'options définie dans une <datalist>.

Nous définissons d'abord une <datalist> en HTML contenant plusieurs navigateurs, un élément d'entrée de formulaire de type text qui l'utilise, et un bouton.

html
<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>Sélectionner un navigateur</button>

Le code ci‑dessous ajoute un écouteur d'évènements qui appelle showPicker() lorsque le bouton est cliqué.

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

button.addEventListener("click", () => {
  try {
    browserInput.showPicker();
  } catch (error) {
    // Revenir à un autre mécanisme de sélection
  }
});

Comme pour les autres sélecteurs, nous ne pouvons pas montrer ce code en cours d'exécution comme exemple en direct, car il s'exécute dans un cadre d'origine croisée et provoquerait une SecurityError.

showPicker() pour l'autocomplétion

showPicker() peut afficher un sélecteur pour une entrée de formulaire ayant l'attribut autocomplete.

Ici, nous définissons un élément d'entrée de formulaire qui utilise l'option d'autocomplétion de « name ».

html
<input autocomplete="name" />
<button>Afficher les options d'autocomplétion</button>

Le code ci‑dessous affiche le sélecteur pour l'entrée de formulaire lorsque le bouton est cliqué.

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

button.addEventListener("click", () => {
  try {
    browserInput.showPicker();
  } catch (error) {
    // Revenir à un autre mécanisme de sélection
  }
});

L'élément HTML <input>
L'interface HTMLInputElement
La méthode HTMLSelectElement.showPicker()
L'élément HTML <datalist>
L'attribut HTML autocomplete

Aider à améliorer MDN

Cette page vous a-t-elle été utile ?

Oui Non

Apprendre à contribuer

Cette page a été modifiée le 13 mai 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu

API HTML DOM
HTMLInputElement
Propriétés d'instance
Méthodes d'instance
Évènements
Héritage
Pages liées à HTML DOM
Guides
1. Utiliser les microtâches en JavaScript avec queueMicrotask()
2. Aller plus loin : Les microtâches et l'environnement d'exécution JavaScript