HTMLInputElement: cancel event

Baseline 2023

Newly available

Since May 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Das cancel-Ereignis wird auf einem <input>-Element ausgelöst, wenn der Benutzer den Dateiauswahldialog mit der Esc-Taste oder der Abbrechen-Schaltfläche schließt und wenn der Benutzer die gleichen Dateien erneut auswählt, die zuvor von type="file" ausgewählt wurden.

Dieses Ereignis kann nicht abgebrochen werden, kann jedoch weitergegeben werden.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandler-Eigenschaft.

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

oncancel = (event) => { }

Ereignistyp

Ein generisches Event.

Beispiele

Abbrechen eines Input-Elements

HTML

html

<label for="file">Select a file. Or don't.</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 = "Canceled.";
});

elem.addEventListener("change", () => {
  if (elem.files.length == 1) {
    result.textContent = "File Selected.";
  }
});

Ergebnis

Öffnen Sie den Dateiwähler und schließen Sie dann das Auswahldialogfeld mit der Escape-Taste oder der Abbrechen-Schaltfläche. Beide Aktionen führen dazu, dass das cancel-Ereignis ausgelöst wird. Versuchen Sie auch, eine lokale Datei auf Ihrem Computer auszuwählen; öffnen Sie dann das Dateiauswahlfenster erneut und wählen Sie dieselbe Datei erneut aus. Auch dies löst das cancel-Ereignis aus.

Spezifikationen

Specification
HTML # event-cancel
HTML # handler-oncancel

Browser-Kompatibilität

Siehe auch

HTML <input>-Element