diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt index 70c0b46389b7c4f..7170efeef1e5072 100644 --- a/files/en-us/_redirects.txt +++ b/files/en-us/_redirects.txt @@ -8099,7 +8099,7 @@ /en-US/docs/Web/API/Element/MozMousePixelScroll /en-US/docs/Web/API/Element/MozMousePixelScroll_event /en-US/docs/Web/API/Element/accessKey /en-US/docs/Web/API/HTMLElement/accessKey /en-US/docs/Web/API/Element/attachInternals /en-US/docs/Web/API/HTMLElement/attachInternals -/en-US/docs/Web/API/Element/cancel_event /en-US/docs/Web/API/HTMLDialogElement/cancel_event +/en-US/docs/Web/API/Element/cancel_event /en-US/docs/Web/API/HTMLElement/cancel_event /en-US/docs/Web/API/Element/contentvisibilityautostatechanged_event /en-US/docs/Web/API/Element/contentvisibilityautostatechange_event /en-US/docs/Web/API/Element/createShadowRoot /en-US/docs/Web/API/Element/shadowRoot /en-US/docs/Web/API/Element/error_event /en-US/docs/Web/API/HTMLElement/error_event @@ -8414,6 +8414,7 @@ /en-US/docs/Web/API/HTMLContentElement.select /en-US/docs/Web/API/HTMLSlotElement /en-US/docs/Web/API/HTMLContentElement/getDistributedNodes /en-US/docs/Web/API/HTMLSlotElement /en-US/docs/Web/API/HTMLContentElement/select /en-US/docs/Web/API/HTMLSlotElement +/en-US/docs/Web/API/HTMLDialogElement/cancel /en-US/docs/Web/API/HTMLElement/cancel_event /en-US/docs/Web/API/HTMLDialogElement/close() /en-US/docs/Web/API/HTMLDialogElement/close /en-US/docs/Web/API/HTMLDialogElement/returnValue() /en-US/docs/Web/API/HTMLDialogElement/returnValue /en-US/docs/Web/API/HTMLDialogElement/show() /en-US/docs/Web/API/HTMLDialogElement/show @@ -11768,7 +11769,7 @@ /en-US/docs/Web/Events/blur /en-US/docs/Web/API/Element/blur_event /en-US/docs/Web/Events/boundary /en-US/docs/Web/API/SpeechSynthesisUtterance/boundary_event /en-US/docs/Web/Events/bufferedamountlow /en-US/docs/Web/API/RTCDataChannel/bufferedamountlow_event -/en-US/docs/Web/Events/cancel /en-US/docs/Web/API/HTMLDialogElement/cancel_event +/en-US/docs/Web/Events/cancel /en-US/docs/Web/API/HTMLElement/cancel_event /en-US/docs/Web/Events/canplay /en-US/docs/Web/API/HTMLMediaElement/canplay_event /en-US/docs/Web/Events/canplaythrough /en-US/docs/Web/API/HTMLMediaElement/canplaythrough_event /en-US/docs/Web/Events/change /en-US/docs/Web/API/HTMLElement/change_event diff --git a/files/en-us/_wikihistory.json b/files/en-us/_wikihistory.json index ce41a03f844d5e0..8de47c719626ed4 100644 --- a/files/en-us/_wikihistory.json +++ b/files/en-us/_wikihistory.json @@ -37809,8 +37809,8 @@ "dhodder" ] }, - "Web/API/HTMLDialogElement/cancel_event": { - "modified": "2020-10-15T21:43:04.572Z", + "Web/API/HTMLElement/cancel_event": { + "modified": "2023-11-04T04:52:37.782Z", "contributors": [ "mfuji09", "fscholz", @@ -37818,7 +37818,8 @@ "sideshowbarker", "fgwang", "rolfedh", - "cvrebert" + "cvrebert", + "FurryR" ] }, "Web/API/HTMLDialogElement/close": { diff --git a/files/en-us/web/api/element/index.md b/files/en-us/web/api/element/index.md index fc16ef128892a87..61708725f876909 100644 --- a/files/en-us/web/api/element/index.md +++ b/files/en-us/web/api/element/index.md @@ -292,7 +292,7 @@ Listen to these events using `addEventListener()` or by assigning an event liste - {{domxref("Element/beforematch_event", "beforematch")}} {{Experimental_Inline}} - : Fires on an element that is in the [_hidden until found_](/en-US/docs/Web/HTML/Global_attributes/hidden) state, when the browser is about to reveal its content because the user has found the content through the "find in page" feature or through fragment navigation. -- {{domxref("HTMLDialogElement/cancel_event", "cancel")}} +- {{domxref("HTMLElement/cancel_event", "cancel")}} - : Fires on a {{HTMLElement("dialog")}} when the user instructs the browser that they wish to dismiss the currently open modal dialog. The browser fires this event when the user presses the Esc key to close the modal dialog. - {{domxref("Element/contentvisibilityautostatechange_event", "contentvisibilityautostatechange")}} {{Experimental_Inline}} - : Fires on any element with {{cssxref("content-visibility", "content-visibility: auto")}} set on it when it starts or stops being [relevant to the user](/en-US/docs/Web/CSS/CSS_containment#relevant_to_the_user) and [skipping its contents](/en-US/docs/Web/CSS/CSS_containment#skips_its_contents). diff --git a/files/en-us/web/api/htmldialogelement/index.md b/files/en-us/web/api/htmldialogelement/index.md index 28da2b0e6fc40b5..b4fa499a3b79bb9 100644 --- a/files/en-us/web/api/htmldialogelement/index.md +++ b/files/en-us/web/api/htmldialogelement/index.md @@ -33,7 +33,7 @@ _Inherits methods from its parent, {{domxref("HTMLElement")}}._ ## Events -- {{domxref("HTMLDialogElement/cancel_event", "cancel")}} +- {{domxref("HTMLElement/cancel_event", "cancel")}} - : Fired when the user dismisses the current open dialog with the escape key. - {{domxref("HTMLDialogElement/close_event", "close")}} - : Fired when the dialog is closed, whether with the escape key, the `HTMLDialogElement.close()` method, or via submitting a form within the dialog with [`method="dialog"`](/en-US/docs/Web/HTML/Element/form#method). @@ -42,7 +42,7 @@ _Inherits methods from its parent, {{domxref("HTMLElement")}}._ ### Opening a modal dialog -The following example shows a button that, when clicked, opens a modal {{htmlelement("dialog")}} containing a form via the {{domxref("HTMLDialogElement.showModal()")}} function. While open, everything other than the modal dialog's contents is inert. From there you can click the _Cancel_ button to close the dialog (via the {{domxref("HTMLDialogElement.close()")}} function), or submit the form via the submit button. Selecting the cancel button closes the dialog, creating a {{domxref("HTMLDialogElement/close_event", "close")}} event, not a {{domxref("HTMLDialogElement/cancel_event", "cancel")}} event. +The following example shows a button that, when clicked, opens a modal {{htmlelement("dialog")}} containing a form via the {{domxref("HTMLDialogElement.showModal()")}} function. While open, everything other than the modal dialog's contents is inert. From there you can click the _Cancel_ button to close the dialog (via the {{domxref("HTMLDialogElement.close()")}} function), or submit the form via the submit button. Selecting the cancel button closes the dialog, creating a {{domxref("HTMLDialogElement/close_event", "close")}} event, not a {{domxref("HTMLElement/cancel_event", "cancel")}} event. #### HTML diff --git a/files/en-us/web/api/htmldialogelement/showmodal/index.md b/files/en-us/web/api/htmldialogelement/showmodal/index.md index 8cd4148c1e4ab63..13840ce0e15b97e 100644 --- a/files/en-us/web/api/htmldialogelement/showmodal/index.md +++ b/files/en-us/web/api/htmldialogelement/showmodal/index.md @@ -37,7 +37,7 @@ None ({{jsxref("undefined")}}). ### Opening a modal dialog -The following example shows a button that, when clicked, opens a modal {{htmlelement("dialog")}} containing a form via the {{domxref("HTMLDialogElement.showModal()")}} function. While open, everything other than the modal dialog's contents is inert. From there you can click the _Cancel_ button to close the dialog (via the {{domxref("HTMLDialogElement.close()")}} function), or submit the form via the submit button. Selecting the cancel button closes the dialog, creating a {{domxref("HTMLDialogElement/close_event", "close")}} event, not a {{domxref("HTMLDialogElement/cancel_event", "cancel")}} event. +The following example shows a button that, when clicked, opens a modal {{htmlelement("dialog")}} containing a form via the {{domxref("HTMLDialogElement.showModal()")}} function. While open, everything other than the modal dialog's contents is inert. From there you can click the _Cancel_ button to close the dialog (via the {{domxref("HTMLDialogElement.close()")}} function), or submit the form via the submit button. Selecting the cancel button closes the dialog, creating a {{domxref("HTMLDialogElement/close_event", "close")}} event, not a {{domxref("HTMLElement/cancel_event", "cancel")}} event. #### HTML diff --git a/files/en-us/web/api/htmldialogelement/cancel_event/index.md b/files/en-us/web/api/htmlelement/cancel_event/index.md similarity index 50% rename from files/en-us/web/api/htmldialogelement/cancel_event/index.md rename to files/en-us/web/api/htmlelement/cancel_event/index.md index 9ef31ac1d2d2c9d..5e52e7b40aebdc2 100644 --- a/files/en-us/web/api/htmldialogelement/cancel_event/index.md +++ b/files/en-us/web/api/htmlelement/cancel_event/index.md @@ -1,14 +1,14 @@ --- -title: "HTMLDialogElement: cancel event" +title: "HTMLElement: cancel event" short-title: cancel -slug: Web/API/HTMLDialogElement/cancel_event +slug: Web/API/HTMLElement/cancel_event page-type: web-api-event -browser-compat: api.HTMLDialogElement.cancel_event +browser-compat: api.HTMLElement.cancel_event --- {{APIRef}} -The **`cancel`** event fires on a {{HTMLElement("dialog")}} when the user instructs the browser that they wish to dismiss the current open dialog. The browser fires this event when the user presses the Esc key. +The **`cancel`** event is fired by {{HTMLElement("input")}} and {{HTMLElement("dialog")}} elements. The event is fired when the user cancels the currently open dialog by closing it with the Esc key. It is also fired by the [file input](/en-US/docs/Web/HTML/Element/input/file) when the user cancels the file picker dialog via the Esc key or the cancel button and when the user re-selects the same files that were previously selected. This event does not bubble. @@ -30,7 +30,7 @@ A generic {{domxref("Event")}}. ## Examples -### Live example +### \ element #### HTML @@ -80,7 +80,48 @@ closeButton.addEventListener("click", () => { #### Result -{{ EmbedLiveSample('Live_example', '100%', '100px') }} +{{ EmbedLiveSample('dialog_cancel', '100%', '100px') }} + +### \ element + +#### HTML + +```html + + + +
+``` + +```css hidden +div { + margin-bottom: 10px; +} +``` + +#### JavaScript + +```js +const elem = document.getElementById("file"); + +const result = document.getElementById("result"); + +elem.addEventListener("cancel", () => { + result.textContent = "Cancelled."; +}); + +elem.addEventListener("change", () => { + if (elem.files.length == 1) { + result.textContent = "File Selected."; + } +}); +``` + +#### Result + +{{ EmbedLiveSample('input_cancel', '100%', '100px') }} + +Open the file selector, then close the selection dialog with the escape key or the cancel button. Both of these will cause the cancel event to be fired. Also, try selecting a local file on your machine; then reopen the file selection window and reselect the same file. This too causes the cancel event to be fired. ## Specifications @@ -92,5 +133,6 @@ closeButton.addEventListener("click", () => { ## See also +- HTML {{HTMLElement("input")}} element - HTML {{HTMLElement("dialog")}} element - {{domxref("HTMLDialogElement/close_event", "close")}} diff --git a/files/en-us/web/events/index.md b/files/en-us/web/events/index.md index c7f67f1aeb6ddbd..bf7b162bccbfbc0 100644 --- a/files/en-us/web/events/index.md +++ b/files/en-us/web/events/index.md @@ -979,6 +979,7 @@ This section lists events that have _their own_ reference pages on MDN. If you a - [webkitmouseforceup event](/en-US/docs/Web/API/Element/webkitmouseforceup_event) - [webkitmouseforcewillbegin event](/en-US/docs/Web/API/Element/webkitmouseforcewillbegin_event) - [wheel event](/en-US/docs/Web/API/Element/wheel_event) + - [cancel event](/en-US/docs/Web/API/Element/cancel_event) - {{DOMxRef("EventSource")}} @@ -1007,7 +1008,6 @@ This section lists events that have _their own_ reference pages on MDN. If you a - {{DOMxRef("HTMLDialogElement")}} - - [cancel event](/en-US/docs/Web/API/HTMLDialogElement/cancel_event) - [close event](/en-US/docs/Web/API/HTMLDialogElement/close_event) - {{DOMxRef("HTMLElement")}} diff --git a/files/en-us/web/html/element/dialog/index.md b/files/en-us/web/html/element/dialog/index.md index ce0cde43a27726d..54dc822051cd4ff 100644 --- a/files/en-us/web/html/element/dialog/index.md +++ b/files/en-us/web/html/element/dialog/index.md @@ -271,7 +271,7 @@ The `` element is exposed by browsers in a manner similar to custom dial - {{domxref("HTMLDialogElement")}} interface - {{domxref("HTMLDialogElement/close_event", "close")}} event -- {{domxref("HTMLDialogElement/cancel_event", "cancel")}} event +- {{domxref("HTMLElement/cancel_event", "cancel")}} event - {{domxref("HTMLDialogElement/open", "open")}} property of the `HTMLDialogElement` interface - [`inert`](/en-US/docs/Web/HTML/Global_attributes/inert) global attribute for HTML elements - {{CSSXref("::backdrop")}} CSS pseudo-element diff --git a/files/en-us/web/html/element/input/file/index.md b/files/en-us/web/html/element/input/file/index.md index 01dc4f4332765a7..6e36edc4db047e2 100644 --- a/files/en-us/web/html/element/input/file/index.md +++ b/files/en-us/web/html/element/input/file/index.md @@ -170,6 +170,26 @@ The `accept` attribute doesn't validate the types of the selected files; it prov Because of this, you should make sure that the `accept` attribute is backed up by appropriate server-side validation. +### Detecting cancellations + +The `cancel` event is fired when the user does not change their selection, reselecting the previously selected files. The `cancel` event is also fired when the file picker dialog gets closed, or canceled, via the "cancel" button or the escape key. + +For example, the following code will log to the console if the user closes the popup without selecting a file: + +```js +const elem = document.createElement("input"); +elem.type = "file"; +elem.addEventListener("cancel", () => { + console.log("Cancelled."); +}); +elem.addEventListener("change", () => { + if (elem.files.length == 1) { + console.log("File selected: ", elem.files[0]); + } +}); +elem.click(); +``` + ### Notes 1. You cannot set the value of a file picker from a script — doing something like the following has no effect: @@ -396,8 +416,9 @@ The example looks like this; have a play: Events - {{domxref("HTMLElement/change_event", "change")}} and - {{domxref("HTMLElement/input_event", "input")}} + {{domxref("HTMLElement/change_event", "change")}}, + {{domxref("HTMLElement/input_event", "input")}} and + {{domxref("HTMLElement/cancel_event", "cancel")}}