From 2f1abc67d6a3a82d3aac053cdb5e947c7b080caa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=87=8C?= Date: Sat, 14 Oct 2023 16:02:38 +0800 Subject: [PATCH 01/16] Add `cancel` event https://html.spec.whatwg.org/multipage/indices.html#event-cancel: Fired at dialog elements when they are canceled by the user (e.g., by pressing the Escape key), or at input elements in the File state when the user does not change their selection --- files/en-us/web/html/element/input/file/index.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) 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 ed5f392a6421fd6..8ae92990856a735 100644 --- a/files/en-us/web/html/element/input/file/index.md +++ b/files/en-us/web/html/element/input/file/index.md @@ -396,8 +396,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")}} From e66ed1f51e09cea8febfe5f5d08fbbc4e23b29a3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=87=8C?= Date: Sat, 14 Oct 2023 16:13:16 +0800 Subject: [PATCH 02/16] :memo: Make linter happy Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- files/en-us/web/html/element/input/file/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 8ae92990856a735..05966ab697e0873 100644 --- a/files/en-us/web/html/element/input/file/index.md +++ b/files/en-us/web/html/element/input/file/index.md @@ -397,7 +397,7 @@ The example looks like this; have a play: Events {{domxref("HTMLElement/change_event", "change")}}, - {{domxref("HTMLElement/input_event", "input")}} and + {{domxref("HTMLElement/input_event", "input")}} and {{domxref("HTMLElement/cancel_event", "cancel")}} From b1e47c1cd1c824e0a49123786bfa888627485da5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=87=8C?= Date: Sat, 14 Oct 2023 16:33:26 +0800 Subject: [PATCH 03/16] :memo: Add an example --- .../en-us/web/html/element/input/file/index.md | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) 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 05966ab697e0873..5162e895521c057 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,24 @@ 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 + +Event `cancel` is fired when the user does not change their selection. + +For example, the following code will log to console if the user closes the popup without selecting files: + +``` +const elem = document.createElement("input"); +elem.type = "file"; +elem.addEventListener("cancel", () => { + console.log("Cancelled."); +}); +elem.addEventListener("change", () => { + console.log("File selected: ", ); +}); +elem.click(); +``` + ### Notes 1. You cannot set the value of a file picker from a script — doing something like the following has no effect: From 0379c00b9ce19ea48403eba3c3a5c22240ed98a8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=87=8C?= Date: Sat, 14 Oct 2023 16:34:33 +0800 Subject: [PATCH 04/16] :memo: highlight --- files/en-us/web/html/element/input/file/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 5162e895521c057..8bdb9cfb3ca0ea6 100644 --- a/files/en-us/web/html/element/input/file/index.md +++ b/files/en-us/web/html/element/input/file/index.md @@ -176,7 +176,7 @@ Event `cancel` is fired when the user does not change their selection. For example, the following code will log to console if the user closes the popup without selecting files: -``` +```js const elem = document.createElement("input"); elem.type = "file"; elem.addEventListener("cancel", () => { From 6cbda20fac885c23e598541a300c8bafce23d737 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=87=8C?= Date: Sat, 14 Oct 2023 16:35:23 +0800 Subject: [PATCH 05/16] :bug: typo --- files/en-us/web/html/element/input/file/index.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) 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 8bdb9cfb3ca0ea6..6a053fcea9dfb03 100644 --- a/files/en-us/web/html/element/input/file/index.md +++ b/files/en-us/web/html/element/input/file/index.md @@ -183,7 +183,9 @@ elem.addEventListener("cancel", () => { console.log("Cancelled."); }); elem.addEventListener("change", () => { - console.log("File selected: ", ); + if (elem.files.length == 1) { + console.log("File selected: ", elem.files[0]); + } }); elem.click(); ``` From 45edb60857d632cf19bacbfff9eab1071a661f94 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=87=8C?= Date: Sat, 4 Nov 2023 12:30:32 +0800 Subject: [PATCH 06/16] :memo: Move cancel_event to HTMLElement --- .../web/api/htmlelement/cancel_event/index.md | 135 ++++++++++++++++++ 1 file changed, 135 insertions(+) create mode 100644 files/en-us/web/api/htmlelement/cancel_event/index.md diff --git a/files/en-us/web/api/htmlelement/cancel_event/index.md b/files/en-us/web/api/htmlelement/cancel_event/index.md new file mode 100644 index 000000000000000..c9c5f1948b56fb3 --- /dev/null +++ b/files/en-us/web/api/htmlelement/cancel_event/index.md @@ -0,0 +1,135 @@ +--- +title: "HTMLElement: cancel event" +short-title: cancel +slug: Web/API/HTMLElement/cancel_event +page-type: web-api-event +browser-compat: api.HTMLElement.cancel_event +--- + +{{APIRef}} + +The **`cancel`** event is fired at {{HTMLElement("input")}} and {{HTMLElement("dialog")}} elements when the user instructs the browser that they wish to dismiss the current open dialog, or at input elements in the File state when the user does not change their selection. For {{HTMLElement("dialog")}} elements, The browser fires this event when the user presses the Esc key. + +This event does not bubble. + +When a `` is dismissed with the Esc key, both the `cancel` and {{domxref("HTMLDialogElement/close_event", "close")}} events are fired. + +## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener("cancel", (event) => {}); + +oncancel = (event) => {}; +``` + +## Event type + +A generic {{domxref("Event")}}. + +## Examples + +### element + +#### HTML + +```html + + + + + + +
+``` + +```css hidden +button, +div { + margin: 0.5rem; +} +``` + +#### JavaScript + +```js +const result = document.querySelector(".result"); + +const dialog = document.querySelector(".example-dialog"); + +dialog.addEventListener("cancel", (event) => { + result.textContent = "dialog was canceled"; +}); + +const openDialog = document.querySelector(".open-dialog"); +openDialog.addEventListener("click", () => { + if (typeof dialog.showModal === "function") { + dialog.showModal(); + result.textContent = ""; + } else { + result.textContent = "The dialog API is not supported by this browser"; + } +}); + +const closeButton = document.querySelector(".close"); +closeButton.addEventListener("click", () => { + dialog.close(); +}); +``` + +#### Result + +{{ 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') }} + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- HTML {{HTMLElement("input")}} element +- HTML {{HTMLElement("dialog")}} element +- {{domxref("HTMLDialogElement/close_event", "close")}} From 7785561e090ee2769d8abed5d448f631612a2238 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=87=8C?= Date: Sat, 4 Nov 2023 12:31:35 +0800 Subject: [PATCH 07/16] :fire: Removed original HTMLDialogElement/cancel_event --- .../htmldialogelement/cancel_event/index.md | 96 ------------------- 1 file changed, 96 deletions(-) delete mode 100644 files/en-us/web/api/htmldialogelement/cancel_event/index.md diff --git a/files/en-us/web/api/htmldialogelement/cancel_event/index.md b/files/en-us/web/api/htmldialogelement/cancel_event/index.md deleted file mode 100644 index 9ef31ac1d2d2c9d..000000000000000 --- a/files/en-us/web/api/htmldialogelement/cancel_event/index.md +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: "HTMLDialogElement: cancel event" -short-title: cancel -slug: Web/API/HTMLDialogElement/cancel_event -page-type: web-api-event -browser-compat: api.HTMLDialogElement.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. - -This event does not bubble. - -When a `` is dismissed with the Esc key, both the `cancel` and {{domxref("HTMLDialogElement/close_event", "close")}} events are fired. - -## Syntax - -Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. - -```js -addEventListener("cancel", (event) => {}); - -oncancel = (event) => {}; -``` - -## Event type - -A generic {{domxref("Event")}}. - -## Examples - -### Live example - -#### HTML - -```html - - - - - - -
-``` - -```css hidden -button, -div { - margin: 0.5rem; -} -``` - -#### JavaScript - -```js -const result = document.querySelector(".result"); - -const dialog = document.querySelector(".example-dialog"); - -dialog.addEventListener("cancel", (event) => { - result.textContent = "dialog was canceled"; -}); - -const openDialog = document.querySelector(".open-dialog"); -openDialog.addEventListener("click", () => { - if (typeof dialog.showModal === "function") { - dialog.showModal(); - result.textContent = ""; - } else { - result.textContent = "The dialog API is not supported by this browser"; - } -}); - -const closeButton = document.querySelector(".close"); -closeButton.addEventListener("click", () => { - dialog.close(); -}); -``` - -#### Result - -{{ EmbedLiveSample('Live_example', '100%', '100px') }} - -## Specifications - -{{Specifications}} - -## Browser compatibility - -{{Compat}} - -## See also - -- HTML {{HTMLElement("dialog")}} element -- {{domxref("HTMLDialogElement/close_event", "close")}} From 3fae541a97037d7c5fd36499518c8ada896c86b8 Mon Sep 17 00:00:00 2001 From: FurryR Date: Sat, 4 Nov 2023 12:54:47 +0800 Subject: [PATCH 08/16] :memo: Update all links --- files/en-us/_redirects.txt | 5 +++-- files/en-us/_wikihistory.json | 7 ++++--- files/en-us/web/api/element/index.md | 2 +- files/en-us/web/api/htmldialogelement/index.md | 4 ++-- files/en-us/web/api/htmldialogelement/showmodal/index.md | 2 +- files/en-us/web/api/htmlelement/cancel_event/index.md | 4 ++-- files/en-us/web/events/index.md | 2 +- files/en-us/web/html/element/dialog/index.md | 2 +- 8 files changed, 15 insertions(+), 13 deletions(-) diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt index 9200ab431e0a14a..f6e2fd62cc3f48f 100644 --- a/files/en-us/_redirects.txt +++ b/files/en-us/_redirects.txt @@ -8097,7 +8097,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 @@ -8412,6 +8412,7 @@ /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/close() /en-US/docs/Web/API/HTMLDialogElement/close +/en-US/docs/Web/API/HTMLDialogElement/cancel /en-US/docs/Web/API/HTMLElement/cancel_event /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 /en-US/docs/Web/API/HTMLDialogElement/showModal() /en-US/docs/Web/API/HTMLDialogElement/showModal @@ -11720,7 +11721,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 10594c734692b76..59af4da9b5e2bd9 100644 --- a/files/en-us/_wikihistory.json +++ b/files/en-us/_wikihistory.json @@ -37825,8 +37825,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", @@ -37834,7 +37834,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 73c8bfec634d3e6..818299baf1fab09 100644 --- a/files/en-us/web/api/element/index.md +++ b/files/en-us/web/api/element/index.md @@ -288,7 +288,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/htmlelement/cancel_event/index.md b/files/en-us/web/api/htmlelement/cancel_event/index.md index c9c5f1948b56fb3..102dc5809891a8f 100644 --- a/files/en-us/web/api/htmlelement/cancel_event/index.md +++ b/files/en-us/web/api/htmlelement/cancel_event/index.md @@ -30,7 +30,7 @@ A generic {{domxref("Event")}}. ## Examples -### element +### \ element #### HTML @@ -82,7 +82,7 @@ closeButton.addEventListener("click", () => { {{ EmbedLiveSample('dialog_cancel', '100%', '100px') }} -### element +### \ element #### HTML 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 From da6496861ef26d3c71db0c0f5b3ba2a9bacfca81 Mon Sep 17 00:00:00 2001 From: FurryR Date: Sat, 4 Nov 2023 12:59:47 +0800 Subject: [PATCH 09/16] :bug: Sort redirects --- files/en-us/_redirects.txt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt index f6e2fd62cc3f48f..45fc996abd77d8e 100644 --- a/files/en-us/_redirects.txt +++ b/files/en-us/_redirects.txt @@ -8411,8 +8411,8 @@ /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/close() /en-US/docs/Web/API/HTMLDialogElement/close /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 /en-US/docs/Web/API/HTMLDialogElement/showModal() /en-US/docs/Web/API/HTMLDialogElement/showModal From 25e4b669b8c3722f2daddb7408221a18f42a3658 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=87=8C?= Date: Sat, 11 Nov 2023 16:27:33 +0800 Subject: [PATCH 10/16] chore: Merge suggestion #1 Co-authored-by: Estelle Weyl --- files/en-us/web/api/htmlelement/cancel_event/index.md | 1 + 1 file changed, 1 insertion(+) diff --git a/files/en-us/web/api/htmlelement/cancel_event/index.md b/files/en-us/web/api/htmlelement/cancel_event/index.md index 102dc5809891a8f..f7009a1315c0e65 100644 --- a/files/en-us/web/api/htmlelement/cancel_event/index.md +++ b/files/en-us/web/api/htmlelement/cancel_event/index.md @@ -87,6 +87,7 @@ closeButton.addEventListener("click", () => { #### HTML ```html +
From 19a0d577babe877f8fff922ef006a1901e5968f2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=87=8C?= Date: Sat, 11 Nov 2023 16:27:50 +0800 Subject: [PATCH 11/16] chore: Merge suggestion #2 Co-authored-by: Estelle Weyl --- files/en-us/web/html/element/input/file/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 10e30b85abde0cf..fb2e2ed69a79b2e 100644 --- a/files/en-us/web/html/element/input/file/index.md +++ b/files/en-us/web/html/element/input/file/index.md @@ -172,7 +172,7 @@ Because of this, you should make sure that the `accept` attribute is backed up b ### Detecting cancellations -Event `cancel` is fired when the user does not change their selection. +The `cancel` event is fired when the user does not change their selection and 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 console if the user closes the popup without selecting files: From e1aba9894f4092712bc6b9f918ff7ad9beba85b8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=87=8C?= Date: Sat, 11 Nov 2023 16:28:07 +0800 Subject: [PATCH 12/16] chore: Merge suggestion #3 Co-authored-by: Estelle Weyl --- files/en-us/web/html/element/input/file/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 fb2e2ed69a79b2e..19b8da99d311a0a 100644 --- a/files/en-us/web/html/element/input/file/index.md +++ b/files/en-us/web/html/element/input/file/index.md @@ -174,7 +174,7 @@ Because of this, you should make sure that the `accept` attribute is backed up b The `cancel` event is fired when the user does not change their selection and 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 console if the user closes the popup without selecting files: +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"); From 0c8fa15b56c42c68830fb795c1c1922a49a44f4e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=87=8C?= Date: Sat, 11 Nov 2023 16:29:00 +0800 Subject: [PATCH 13/16] chore: Merge suggestion #4 Co-authored-by: Estelle Weyl --- files/en-us/web/api/htmlelement/cancel_event/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/api/htmlelement/cancel_event/index.md b/files/en-us/web/api/htmlelement/cancel_event/index.md index f7009a1315c0e65..7c9cda99882ab11 100644 --- a/files/en-us/web/api/htmlelement/cancel_event/index.md +++ b/files/en-us/web/api/htmlelement/cancel_event/index.md @@ -8,7 +8,7 @@ browser-compat: api.HTMLElement.cancel_event {{APIRef}} -The **`cancel`** event is fired at {{HTMLElement("input")}} and {{HTMLElement("dialog")}} elements when the user instructs the browser that they wish to dismiss the current open dialog, or at input elements in the File state when the user does not change their selection. For {{HTMLElement("dialog")}} elements, 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. From 680b219942047863da0ea8d0c33c219f53beeb94 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=87=8C?= Date: Sun, 19 Nov 2023 09:10:22 +0800 Subject: [PATCH 14/16] chore: Merge suggestion (5) Co-authored-by: Estelle Weyl --- files/en-us/web/api/htmlelement/cancel_event/index.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/files/en-us/web/api/htmlelement/cancel_event/index.md b/files/en-us/web/api/htmlelement/cancel_event/index.md index 7c9cda99882ab11..5e52e7b40aebdc2 100644 --- a/files/en-us/web/api/htmlelement/cancel_event/index.md +++ b/files/en-us/web/api/htmlelement/cancel_event/index.md @@ -121,6 +121,8 @@ elem.addEventListener("change", () => { {{ 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 {{Specifications}} From f91cb7019cb00a33b42e103a0e9bd6ed45ec283d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=87=8C?= Date: Sun, 19 Nov 2023 09:10:31 +0800 Subject: [PATCH 15/16] chore: Merge suggestion (6) Co-authored-by: Estelle Weyl --- files/en-us/web/html/element/input/file/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 19b8da99d311a0a..ca05ea38bfd0b32 100644 --- a/files/en-us/web/html/element/input/file/index.md +++ b/files/en-us/web/html/element/input/file/index.md @@ -172,7 +172,7 @@ Because of this, you should make sure that the `accept` attribute is backed up b ### Detecting cancellations -The `cancel` event is fired when the user does not change their selection and when the file picker dialog gets closed, or canceled, via the "cancel" button or the escape key. +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: From 111e2de2d2fa473eb70828323b588cdfe2c92aff Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Mon, 20 Nov 2023 06:52:40 -0800 Subject: [PATCH 16/16] Update files/en-us/web/html/element/input/file/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- files/en-us/web/html/element/input/file/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 ca05ea38bfd0b32..6e36edc4db047e2 100644 --- a/files/en-us/web/html/element/input/file/index.md +++ b/files/en-us/web/html/element/input/file/index.md @@ -172,7 +172,7 @@ Because of this, you should make sure that the `accept` attribute is backed up b ### 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. +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: