HTMLInputElement: cancel event

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Mai 2023⁩.

Dascancel Ereignis wird auf einem<input> Element ausgelöst, wenn der Benutzer den Dateiauswahldialog über dieEsc-Taste oder die Abbrechen-Schaltfläche abbricht und wenn derselbe bereits ausgewählte Datei erneut ausgewählt wird, beitype="file".

Dieses Ereignis kann nicht abgebrochen werden, kann jedoch bubble.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wieaddEventListener(), oder setzen Sie eine Ereignis-Handler-Eigenschaft.

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

Ereignistyp

Ein generischesEvent.

Beispiele

Abbrechen eines Eingabeelements

HTML

html

<label for="file">Select a file. Or don't.</label><input type="file" name="file" /><div></div>

div {  margin-bottom: 10px;}

JavaScript

const elem = document.getElementById("file");const result = document.getElementById("result");elem.addEventListener("cancel", () => {  result.textContent = "Canceled.";});elem.addEventListener("change", () => {  if (elem.files.length === 1) {    result.textContent = "File Selected.";  }});

Ergebnis

Öffnen Sie den Dateiauswahldialog und schließen Sie dann das Auswahldialogfeld mit der Escape-Taste oder der Abbrechen-Schaltfläche. Beide Aktionen lösen das cancel-Ereignis aus. Versuchen Sie auch, eine lokale Datei auf Ihrem Rechner auszuwählen; öffnen Sie dann das Dateiauswahlfenster erneut und wählen Sie dieselbe Datei erneut aus. Auch dies löst das cancel-Ereignis aus.