HTMLInputElement: sự kiện cancel
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since May 2023.
Sự kiện cancel được kích hoạt trên phần tử <input> khi người dùng hủy hộp thoại chọn tệp qua phím Esc hoặc nút hủy và khi người dùng chọn lại các tệp giống như đã chọn trước đó của type="file".
Sự kiện này không thể hủy nhưng có thể nổi bọt.
Cú pháp
Sử dụng tên sự kiện trong các phương thức như addEventListener(), hoặc đặt một thuộc tính trình xử lý sự kiện.
addEventListener("cancel", (event) => { })
oncancel = (event) => { }
Loại sự kiện
Một Event chung.
Ví dụ
Hủy một phần tử input
HTML
<label for="file">Chọn một tệp. Hoặc không.</label>
<input type="file" id="file" name="file" />
<div id="result"></div>
JavaScript
const elem = document.getElementById("file");
const result = document.getElementById("result");
elem.addEventListener("cancel", () => {
result.textContent = "Đã hủy.";
});
elem.addEventListener("change", () => {
if (elem.files.length === 1) {
result.textContent = "Đã chọn tệp.";
}
});
Kết quả
Mở bộ chọn tệp, sau đó đóng hộp thoại chọn bằng phím escape hoặc nút hủy. Cả hai sẽ khiến sự kiện cancel được kích hoạt. Ngoài ra, hãy thử chọn một tệp cục bộ trên máy của bạn; sau đó mở lại cửa sổ chọn tệp và chọn lại cùng tệp đó. Điều này cũng khiến sự kiện cancel được kích hoạt.
Đặc tả kỹ thuật
| Specification |
|---|
| HTML # event-cancel |
| HTML # handler-oncancel |
Tương thích trình duyệt
Xem thêm
- Phần tử HTML
<input>