From e3606ceeb3491a05f64edcf1108416d8fa3b4eb2 Mon Sep 17 00:00:00 2001 From: estelle Date: Tue, 17 Sep 2024 15:51:06 -0700 Subject: [PATCH 01/10] New pages: textareaelement API selection --- .../web/api/htmloptionscollection/index.md | 4 +- .../htmlselectelement/selectedindex/index.md | 6 ++ .../api/htmltextareaelement/select/index.md | 47 +++++++++++ .../htmltextareaelement/select_event/index.md | 4 + .../selectiondirection/index.md | 45 +++++++++++ .../htmltextareaelement/selectionend/index.md | 51 ++++++++++++ .../selectionstart/index.md | 51 ++++++++++++ .../htmltextareaelement/setrangetext/index.md | 40 +++++++++ .../setselectionrange/index.md | 81 +++++++++++++++++++ 9 files changed, 328 insertions(+), 1 deletion(-) create mode 100644 files/en-us/web/api/htmltextareaelement/select/index.md create mode 100644 files/en-us/web/api/htmltextareaelement/selectiondirection/index.md create mode 100644 files/en-us/web/api/htmltextareaelement/selectionend/index.md create mode 100644 files/en-us/web/api/htmltextareaelement/selectionstart/index.md create mode 100644 files/en-us/web/api/htmltextareaelement/setrangetext/index.md create mode 100644 files/en-us/web/api/htmltextareaelement/setselectionrange/index.md diff --git a/files/en-us/web/api/htmloptionscollection/index.md b/files/en-us/web/api/htmloptionscollection/index.md index f966c32d92e3b19..b2900da464ba54c 100644 --- a/files/en-us/web/api/htmloptionscollection/index.md +++ b/files/en-us/web/api/htmloptionscollection/index.md @@ -30,4 +30,6 @@ _This interface inherits the methods of its parent, [`HTMLCollection`](/en-US/do ## See also -- [HTMLCollection](/en-US/docs/Web/API/HTMLCollection) +- {{DOMxRef("HTMLOptionElement")}} +- {{DOMxRef("HTMLCollection")}} +- [Indexed collections guide](/en-US/docs/Web/JavaScript/Guide/Indexed_collections) diff --git a/files/en-us/web/api/htmlselectelement/selectedindex/index.md b/files/en-us/web/api/htmlselectelement/selectedindex/index.md index 7d879a7f19ef7c5..74cc07ecfec7dc0 100644 --- a/files/en-us/web/api/htmlselectelement/selectedindex/index.md +++ b/files/en-us/web/api/htmlselectelement/selectedindex/index.md @@ -56,3 +56,9 @@ selectElem.addEventListener("change", () => { ## Browser compatibility {{Compat}} + +## See also + +- {{DOMxRef("HTMLSelectElement")}} +- {{DOMxRef("HTMLOptionElement")}} +- {{DOMxRef("HTMLOptionsCollection")}} diff --git a/files/en-us/web/api/htmltextareaelement/select/index.md b/files/en-us/web/api/htmltextareaelement/select/index.md new file mode 100644 index 000000000000000..d7aa3261ec1d628 --- /dev/null +++ b/files/en-us/web/api/htmltextareaelement/select/index.md @@ -0,0 +1,47 @@ +--- +title: "HTMLTextAreaElement: select() method" +short-title: select() +slug: Web/API/HTMLTextAreaElement/select +page-type: web-api-instance-method +browser-compat: api.HTMLTextAreaElement.select +--- + +{{APIRef("HTML DOM")}} + +The **`select()`** method of the {{domxref("HTMLTextAreaElement")}} interface selects the entire contents of the {{htmlelement("textarea")}} element. In addition, the {{domxref("HTMLTextAreaElement.select_event", "select")}} event is fired. The `select()` method does not take any parameters and does not return a value. + +## Syntax + +```js-nolint +select() +``` + +### Parameters + +None. + +### Return value + +None ({{jsxref("undefined")}}). + +## Examples + +```js +const textarea = document.getElementById("text-box"); +textarea.select(); +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{HTMLElement("textarea")}} +- {{domxref("HTMLTextAreaElement/select_event", "select")}} event +- {{domxref("EventTarget.addEventListener", "addEventListener()")}} +- CSS {{cssxref("::selection")}} pseudo-element diff --git a/files/en-us/web/api/htmltextareaelement/select_event/index.md b/files/en-us/web/api/htmltextareaelement/select_event/index.md index 9bf17762f003b60..e8826d780a4e810 100644 --- a/files/en-us/web/api/htmltextareaelement/select_event/index.md +++ b/files/en-us/web/api/htmltextareaelement/select_event/index.md @@ -64,3 +64,7 @@ textarea.onselect = logSelection; ## Browser compatibility {{Compat}} + +## See also + +- {{domxref("HTMLTextAreaElement.select()")}} diff --git a/files/en-us/web/api/htmltextareaelement/selectiondirection/index.md b/files/en-us/web/api/htmltextareaelement/selectiondirection/index.md new file mode 100644 index 000000000000000..e3dc1812ed77db1 --- /dev/null +++ b/files/en-us/web/api/htmltextareaelement/selectiondirection/index.md @@ -0,0 +1,45 @@ +--- +title: "HTMLTextAreaElement: direction property" +short-title: direction +slug: Web/API/HTMLTextAreaElement/direction +page-type: web-api-instance-property +browser-compat: api.HTMLTextAreaElement.direction +--- + +{{APIRef("HTML DOM")}} + +The **`direction`** property of the {{domxref("HTMLTextAreaElement")}} interface specifies the current direction of the selection. The possible values are `"forward"`, `"backward"`, and `"none"`. The `forward` value indicates the selection was performed in the start-to-end direction of the current locale, with `backward` indicating the opposite direction. The `none` value occurs if the direction is unknown. It can be used to both retrieve and change the direction of 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 @@ -35,6 +90,9 @@ None. ## See also - {{HTMLElement("textarea")}} -- {{domxref("HTMLTextAreaElement/select_event", "select")}} event -- {{domxref("EventTarget.addEventListener", "addEventListener()")}} -- CSS {{cssxref("::selection")}} pseudo-element +- {{domxref("HTMLTextAreaElement")}} +- {{domxref("HTMLTextAreaElement.select()")}} +- {{domxref("HTMLTextAreaElement.setSelectionRange()")}} +- {{domxref("HTMLTextAreaElement.textLength")}} +- {{domxref("Selection")}} +- {{cssxref("::selection")}} pseudo-element From 2893b8263a96afe2aab056663910501703daf494 Mon Sep 17 00:00:00 2001 From: estelle Date: Wed, 18 Sep 2024 11:46:30 -0700 Subject: [PATCH 03/10] direction to selectionDirection --- .../selectiondirection/index.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/files/en-us/web/api/htmltextareaelement/selectiondirection/index.md b/files/en-us/web/api/htmltextareaelement/selectiondirection/index.md index e3dc1812ed77db1..5a5b0b24ae89d4e 100644 --- a/files/en-us/web/api/htmltextareaelement/selectiondirection/index.md +++ b/files/en-us/web/api/htmltextareaelement/selectiondirection/index.md @@ -1,16 +1,16 @@ --- -title: "HTMLTextAreaElement: direction property" -short-title: direction -slug: Web/API/HTMLTextAreaElement/direction +title: "HTMLTextAreaElement: selectionDirection property" +short-title: selectionDirection +slug: Web/API/HTMLTextAreaElement/selectionDirection page-type: web-api-instance-property -browser-compat: api.HTMLTextAreaElement.direction +browser-compat: api.HTMLTextAreaElement.selectionDirection --- {{APIRef("HTML DOM")}} -The **`direction`** property of the {{domxref("HTMLTextAreaElement")}} interface specifies the current direction of the selection. The possible values are `"forward"`, `"backward"`, and `"none"`. The `forward` value indicates the selection was performed in the start-to-end direction of the current locale, with `backward` indicating the opposite direction. The `none` value occurs if the direction is unknown. It can be used to both retrieve and change the direction of the `