A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://developer.cdn.mozilla.net/ja/docs/Web/API/HTMLInputElement/cancel_event below:

HTMLInputElement: cancel イベント - Web API

HTMLInputElement: cancel イベント

Baseline 2023

Newly available

cancel イベントは <input> 要素において、ユーザーが Esc キーやキャンセルボタンによってファイルピッカーダイアログをキャンセルしたり、前回 type="file" で選択された同じファイルを再選択した場合に発生します。

このイベントはキャンセル不可ですが、バブリングします。

構文

このイベント名を addEventListener() などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

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

oncancel = (event) => {};
イベント型

一般的な Event です。

例 input 要素のキャンセル HTML
<label for="file">ファイルを選択するか、選択をやめるかしてください。</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 = "キャンセルされました。";
});

elem.addEventListener("change", () => {
  if (elem.files.length == 1) {
    result.textContent = "ファイルが選択されました。";
  }
});
結果

ファイルセレクターを開き、エスケープキーまたはキャンセルボタンで選択ダイアログを閉じます。どちらも cancel イベントが発行される原因となります。また、自分のマシン上のローカルファイルを選択し、ファイル選択ウィンドウを再度開いてから同じファイルを再選択してみてください。これも cancel イベントが発行される原因となります。

仕様書 ブラウザーの互換性 関連情報

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4