HTMLInputElement : évènement cancel

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 mai 2023.

L'évènement cancel de l'interface HTMLInputElement est déclenché sur un élément HTML <input> lorsque l'utilisateur·ice annule la boîte de dialogue du sélecteur de fichiers via la touche Échap ou le bouton d'annulation, ou lorsqu'il·elle re‑sélectionne les mêmes fichiers qui avaient été précédemment sélectionnés pour un champ de type="file".

Cet évènement n'est pas annulable, mais il peut se propager.

Dans cet article

Syntaxe

Utilisez le nom de l'évènement dans des méthodes comme addEventListener(), ou affectez un gestionnaire d'évènements à la propriété correspondante.

js
addEventListener("cancel", (event) => { })

oncancel = (event) => { }

Type d'évènement

Un objet Event générique.

Exemples

Annuler la sélection de fichiers sur un élément input

HTML

html
<label for="file">Sélectionnez un fichier. Ou pas.</label>
<input type="file" id="file" name="file" />

<div id="result"></div>

div {
  margin-bottom: 10px;
}

JavaScript

js
const elem = document.getElementById("file");

const result = document.getElementById("result");

elem.addEventListener("cancel", () => {
  result.textContent = "Annulé.";
});

elem.addEventListener("change", () => {
  if (elem.files.length === 1) {
    result.textContent = "Fichier sélectionné.";
  }
});

Résultat

Ouvrez le sélecteur de fichiers, puis fermez la boîte de dialogue de sélection avec la touche Échap ou le bouton d'annulation. Chacune de ces actions déclenchera l'évènement cancel. Essayez également de sélectionner un fichier local sur votre machine ; rouvrez ensuite la fenêtre de sélection de fichiers et re‑sélectionnez le même fichier — cela déclenchera aussi l'évènement cancel.

Spécifications

Spécification

HTML
# event-cancel

HTML
# handler-oncancel

Compatibilité des navigateurs

Activez JavaScript pour afficher ce tableau de compatibilité des navigateurs.

Voir aussi

L'élément HTML <input>

Aider à améliorer MDN

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

Oui Non

Apprendre à contribuer

Cette page a été modifiée le 9 déc. 2025 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