HTMLInputElement: cancel イベント
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.
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 |
ブラウザーの互換性
Loading…
関連情報
- HTML の
<input>要素