From 7b393063694605c366ff4721a5db1cb1b43a5185 Mon Sep 17 00:00:00 2001 From: Mayur Tekale <147367560+mayurr7@users.noreply.github.com> Date: Fri, 13 Sep 2024 21:07:26 +0530 Subject: [PATCH 01/68] Fix incorrect use of 'debouncing' in throttle glossary #35868 (#35872) --- files/en-us/glossary/throttle/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/glossary/throttle/index.md b/files/en-us/glossary/throttle/index.md index a864b4e0520c9fa..28d5d1388998db1 100644 --- a/files/en-us/glossary/throttle/index.md +++ b/files/en-us/glossary/throttle/index.md @@ -10,7 +10,7 @@ page-type: glossary-definition Throttling is very similar to {{glossary("debounce", "debouncing")}}. The key difference is that when invocations happen continuously, throttling ensures that the operation is still performed at a certain maximum rate, while debouncing waits indefinitely until the invocations stop for a certain amount of time. -A typical use case of debouncing is when synchronizing with another constantly-updating state. Consider a function `onScrolled`, which listens for the [`scroll`](/en-US/docs/Web/API/Document/scroll_event) event. The `scroll` event may fire as often as every pixel scrolled, so the function will be called in very short intervals. If `onScrolled` is computationally expensive, earlier invocations might block later invocations from happening on time, or block other things from executing in the meantime, leading to a noticeable {{glossary("jank")}}. In this case, we can throttle `onScrolled`, such that it can only be called at most once every 10 milliseconds: +A typical use case of throttling is when synchronizing with another constantly-updating state. Consider a function `onScrolled`, which listens for the [`scroll`](/en-US/docs/Web/API/Document/scroll_event) event. The `scroll` event may fire as often as every pixel scrolled, so the function will be called in very short intervals. If `onScrolled` is computationally expensive, earlier invocations might block later invocations from happening on time, or block other things from executing in the meantime, leading to a noticeable {{glossary("jank")}}. In this case, we can throttle `onScrolled`, such that it can only be called at most once every 10 milliseconds: 1. The first call to `onScrolled` is known as the _leading edge_. 2. For every next call to `onScrolled`, if it is within 10 milliseconds from the first call, it is in the same "batch" as the first call. From 3994f738ebbe4d25e1e68f70cc45be072a22e0c3 Mon Sep 17 00:00:00 2001 From: def00111 Date: Fri, 13 Sep 2024 18:55:15 +0200 Subject: [PATCH 02/68] Update webRequest.filterResponseData() page (#35860) Use str.replaceAll() instead of str.replace() --- .../webextensions/api/webrequest/filterresponsedata/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/mozilla/add-ons/webextensions/api/webrequest/filterresponsedata/index.md b/files/en-us/mozilla/add-ons/webextensions/api/webrequest/filterresponsedata/index.md index 535bd0fef5f116a..1342077f1db8466 100644 --- a/files/en-us/mozilla/add-ons/webextensions/api/webrequest/filterresponsedata/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/api/webrequest/filterresponsedata/index.md @@ -68,7 +68,7 @@ function listener(details) { let str = decoder.decode(event.data, { stream: true }); // Just change any instance of Example in the HTTP response // to WebExtension Example. - str = str.replace(/Example/g, "WebExtension Example"); + str = str.replaceAll("Example", "WebExtension Example"); filter.write(encoder.encode(str)); filter.disconnect(); }; From 5a57c5ce4989d8fc0708e302a20b516a7a99de50 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Beno=C3=AEt=20Rouleau?= Date: Fri, 13 Sep 2024 16:24:46 -0400 Subject: [PATCH 03/68] Make sentence clearer in "Using container size and style queries" page (#35871) As a follow-up to https://github.com/mdn/content/pull/35767#discussion_r1754849093 --- .../css_containment/container_size_and_style_queries/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/css_containment/container_size_and_style_queries/index.md b/files/en-us/web/css/css_containment/container_size_and_style_queries/index.md index ca421c874f9dbf8..7a3471e99da8ecb 100644 --- a/files/en-us/web/css/css_containment/container_size_and_style_queries/index.md +++ b/files/en-us/web/css/css_containment/container_size_and_style_queries/index.md @@ -108,7 +108,7 @@ In the above example, the styles within the container query block will apply to In the above example, the element has two container names, `wide` and `narrow`. The descendants of any elements with `class="sizeContainer"` will get the styles from the `wide` or `narrow` query applied (or both if an element is precisely 20em wide). -The default value `container-type: normal` prevents the container from being a query container, meaning the element is not a size container but it can still be a [style container](#container_style_queries). The default value `container-name: none` states the container has no name, but it does not prevent the element from matching unnamed queries. +The default value `container-type: normal` prevents the container from being a size container, but it can still be a [style container](#container_style_queries). The default value `container-name: none` states the container has no name, but it does not prevent the element from matching unnamed queries. With container queries, we are not limited to size queries! You can also query a container's style features. From 8cf200c4039f6399b6696fc710bee1c4b395d401 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Fri, 13 Sep 2024 16:31:39 -0700 Subject: [PATCH 04/68] New pages: HTMLTextAreaElement min and max length (#35877) --- .../htmltextareaelement/maxlength/index.md | 51 +++++++++++++++++++ .../htmltextareaelement/minlength/index.md | 51 +++++++++++++++++++ 2 files changed, 102 insertions(+) create mode 100644 files/en-us/web/api/htmltextareaelement/maxlength/index.md create mode 100644 files/en-us/web/api/htmltextareaelement/minlength/index.md diff --git a/files/en-us/web/api/htmltextareaelement/maxlength/index.md b/files/en-us/web/api/htmltextareaelement/maxlength/index.md new file mode 100644 index 000000000000000..064bbc02ccb3ebd --- /dev/null +++ b/files/en-us/web/api/htmltextareaelement/maxlength/index.md @@ -0,0 +1,51 @@ +--- +title: "HTMLTextAreaElement: maxLength property" +short-title: maxLength +slug: Web/API/HTMLTextAreaElement/maxLength +page-type: web-api-instance-property +browser-compat: api.HTMLTextAreaElement.maxLength +--- + +{{ApiRef("HTML DOM")}} + +The **`maxLength`** property of the {{domxref("HTMLTextAreaElement")}} interface indicates the maximum number of characters (in UTF-16 code units) allowed to be entered for the value of the {{HTMLElement("textarea")}} element, and the maximum number of characters allowed for the value to be valid. It reflects the element's [`maxlength`](/en-US/docs/Web/HTML/Element/textarea#maxlength) attribute. `-1` means there is no limit on the length of the value. + +> [!NOTE] +> Browsers generally prevent users from entering more characters than the `maxlength` attribute allows. Should the length be longer, the element is considered invalid and the {{domxref("ValidityState")}} object's {{domxref("ValidityState.tooLong", "tooLong")}} property will be `true`. + +## Value + +A number representing the element's `maxlength` if present, or `-1`. + +## Example + +Given the following HTML: + +```html +

+ + +

+``` + +You can use the `maxLength` property to retrieve or set the ` +

+``` + +You can use the `minLength` property to retrieve or set the ` + +``` + +### JavaScript + +```js +const btn = document.getElementById("btn"); + +btn.addEventListener("click", () => { + changeText(); +}); + +function changeText() { + const textarea = document.getElementById("text-box"); + textarea.focus(); + textarea.setRangeText("ALREADY", 14, 17, "select"); +} +``` + +### Result + +{{EmbedLiveSample("Examples")}} + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{HTMLElement("textarea")}} +- {{domxref("HTMLTextAreaElement")}} +- {{domxref("HTMLTextAreaElement.select()")}} +- {{domxref("HTMLTextAreaElement.setSelectionRange()")}} +- {{domxref("HTMLTextAreaElement.textLength")}} +- {{domxref("Selection")}} +- {{cssxref("::selection")}} pseudo-element diff --git a/files/en-us/web/api/htmltextareaelement/setselectionrange/index.md b/files/en-us/web/api/htmltextareaelement/setselectionrange/index.md new file mode 100644 index 000000000000000..635bf58682dc385 --- /dev/null +++ b/files/en-us/web/api/htmltextareaelement/setselectionrange/index.md @@ -0,0 +1,81 @@ +--- +title: "HTMLTextAreaElement: setSelectionRange() method" +short-title: setSelectionRange() +slug: Web/API/HTMLTextAreaElement/setSelectionRange +page-type: web-api-instance-method +browser-compat: api.HTMLTextAreaElement.setSelectionRange +--- + +{{APIRef("HTML DOM")}} + +The **setSelectionRange()`** method of the {{domxref("HTMLTextAreaElement")}} interface sets the start and end positions of the current text selection, and optionally the direction, in an {{HTMLElement("textarea")}} element. The direction indicates the in which selection should be considered to have occurred; for example, that the selection was set by the user clicking and dragging from the end of the selected text toward the beginning. In addition, the {{domxref("HTMLTextAreaElement.select_event", "select")}} and {{domxref("HTMLTextAreaElement.selectionchange_event", "selectchange")}} events are fired. + +This method also updates the {{domxref("HTMLTextAreaElement.selectionStart")}}, {{domxref("HTMLTextAreaElement.selectionEnd")}}, and {{domxref("HTMLTextAreaElement.selectionDirection")}} properties. + +> [!NOTE] +> The `