Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
HTMLInputElement: cancel-Ereignis
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Mai 2023 browserübergreifend verfügbar.
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. Es wird auch ausgelöst, wenn der Benutzer bei einem Element mit type="file" dieselben Dateien erneut auswählt.
Dieses Ereignis kann nicht abgebrochen werden, kann aber aufsteigen.
Syntax
Verwenden Sie den Ereignisnamen in addEventListener():
addEventListener("cancel", (event) => { })
Alternativ können Sie ihn der Event-Handler-Eigenschaft der Schnittstelle zuweisen:
oncancel = (event) => { }
Ereignistyp
Ein generisches Event.
Beispiele
>Abbrechen bei einem input-Element
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 die Dateiauswahl und schließen Sie den Dialog anschließend mit der Escape-Taste oder der Abbrechen-Schaltfläche. In beiden Fällen wird das cancel-Ereignis ausgelöst. Wählen Sie außerdem eine lokale Datei auf Ihrem Computer aus, öffnen Sie die Dateiauswahl erneut und wählen Sie dieselbe Datei noch einmal aus. Auch dadurch wird das cancel-Ereignis ausgelöst.
Spezifikationen
| Spezifikation |
|---|
| HTML> # event-cancel> |
| HTML> # handler-oncancel> |
Browser-Kompatibilität
Siehe auch
- HTML-Element
<input>