HTMLInputElement : évènement cancel

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 ⁨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.

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.

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

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.