HTMLInputElement: cancel イベント
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2023年5月.
cancel イベントは <input> 要素において、ユーザーが Esc キーやキャンセルボタンによってファイルピッカーダイアログをキャンセルしたり、前回 type="file" で選択された同じファイルを再選択した場合に発生します。
このイベントはキャンセル不可ですが、バブリングします。
構文
このイベント名を addEventListener() などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
js
addEventListener("cancel", (event) => {});
oncancel = (event) => {};
イベント型
一般的な Event です。
例
input 要素のキャンセル
HTML
html
<label for="file">ファイルを選択するか、選択をやめるかしてください。</label>
<input type="file" id="file" name="file" />
<div id="result"></div>
JavaScript
js
const elem = document.getElementById("file");
const result = document.getElementById("result");
elem.addEventListener("cancel", () => {
result.textContent = "キャンセルされました。";
});
elem.addEventListener("change", () => {
if (elem.files.length == 1) {
result.textContent = "ファイルが選択されました。";
}
});
結果
ファイルセレクターを開き、エスケープキーまたはキャンセルボタンで選択ダイアログを閉じます。どちらも cancel イベントが発行される原因となります。また、自分のマシン上のローカルファイルを選択し、ファイル選択ウィンドウを再度開いてから同じファイルを再選択してみてください。これも cancel イベントが発行される原因となります。
仕様書
| Specification |
|---|
| HTML # event-cancel |
| HTML # handler-oncancel |
ブラウザーの互換性
関連情報
- HTML の
<input>要素