HTMLDialogElement : propriété returnValue
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 mars 2022.
La propriété returnValue de l'interface HTMLDialogElement est une chaîne de caractères (string) représentant la valeur de retour pour un élément <dialog> lorsqu'il est fermé.
Vous pouvez définir cette valeur directement (dialog.returnValue = "résultat") ou en fournissant la valeur comme argument de type string à close() ou requestClose().
Valeur
Une chaîne de caractères représentant la valeur de retour (returnValue) de la boîte de dialogue.
La valeur par défaut est une chaîne de caractères vide ("").
Exemples
Vérifier la valeur de retour
L'exemple suivant affiche un bouton pour ouvrir une boîte de dialogue. Celle-ci demande à l'utilisateur·ice s'il·elle accepte les conditions d'utilisation.
La boîte de dialogue contient des boutons « Accepter » ou « Refuser » : lorsque l'utilisateur·ice clique sur l'un des boutons, le gestionnaire d'évènement ferme la boîte de dialogue en passant le choix à la fonction close(). Ce choix est alors assigné à la propriété returnValue de la boîte de dialogue.
Dans le gestionnaire d'évènement close de la boîte de dialogue, l'exemple met à jour le texte d'état de la page principale pour afficher la valeur de returnValue.
Si l'utilisateur·ice ferme la boîte de dialogue sans cliquer sur un bouton (par exemple, en appuyant sur la touche Échap), alors la valeur de retour n'est pas définie.
HTML
<dialog id="dialogue">
<p>Acceptez-vous les conditions d'utilisation ?</p>
<button id="refuse" value="declined">Refuser</button>
<button id="accepte" value="accepted">Accepter</button>
</dialog>
<button id="ouvrir">Ouvrir la boîte de dialogue</button>
JavaScript
const dialogue = document.getElementById("dialogue");
const boutonOuvrir = document.getElementById("ouvrir");
const boutonRefuser = document.getElementById("refuse");
const boutonAccepter = document.getElementById("accepte");
boutonOuvrir.addEventListener("click", () => {
// Réinitialiser la valeur de retour à chaque ouverture
dialogue.returnValue = "";
mettreAJourValeurDeRetour();
// Afficher la boîte de dialogue
dialogue.showModal();
});
function fermerDialogue(event) {
const button = event.target;
dialogue.close(button.value);
}
function mettreAJourValeurDeRetour() {
journaliser(`Valeur de retour : "${dialogue.returnValue}"`);
}
boutonRefuser.addEventListener("click", fermerDialogue);
boutonAccepter.addEventListener("click", fermerDialogue);
dialogue.addEventListener("close", mettreAJourValeurDeRetour);
Résultat
Cliquez sur « Ouvrir la boîte de dialogue », puis choisissez les boutons « Accepter » ou « Refuser » dans la boîte de dialogue, ou fermez la boîte de dialogue en appuyant sur la touche Échap. Observez les différents états affichés.
Spécifications
| Spécification |
|---|
| HTML # dom-dialog-returnvalue-dev |
Compatibilité des navigateurs
Voir aussi
- L'élément HTML
<dialog>