HTMLInputElement : méthode showPicker()
Baseline
Widely available
*
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.
Syntaxe
showPicker()
Paramètres
Aucun.
Valeur de retour
Aucune (undefined).
Exceptions
InvalidStateErrorDOMException-
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.
NotAllowedErrorDOMException-
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 Transient activation).
SecurityErrorDOMException-
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 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 :
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
<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.
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.
<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énement 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 mécanisme de sélection
}
});
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 ».
<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é.
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
}
});
Spécifications
| Specification |
|---|
| HTML # dom-input-showpicker |
Compatibilité des navigateurs
Voir aussi
- L'élément HTML
<input> - L'interface
HTMLInputElement - La méthode
HTMLSelectElement.showPicker() - L'élément HTML
<datalist> - L'attribut HTML
autocomplete