New pages: textareaelement API selection (mdn#35922)

* New pages: textareaelement API selection

* New page: setrangetext()

* direction to selectionDirection

* Update files/en-us/web/api/htmltextareaelement/setrangetext/index.md

Co-authored-by: sideshowbarker <[email protected]>

* Update files/en-us/web/api/htmltextareaelement/setselectionrange/index.md

Co-authored-by: sideshowbarker <[email protected]>

* Update files/en-us/web/api/htmltextareaelement/setselectionrange/index.md

Co-authored-by: sideshowbarker <[email protected]>

* Update files/en-us/web/api/htmltextareaelement/setselectionrange/index.md

Co-authored-by: sideshowbarker <[email protected]>

* typo in link

* typo in link

* typo in link

---------

Co-authored-by: sideshowbarker <[email protected]>

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)

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")}}

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

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()")}}

files/en-us/web/api/htmltextareaelement/selectiondirection/index.md

@@ -0,0 +1,48 @@
+---
+title: "HTMLTextAreaElement: selectionDirection property"
+short-title: selectionDirection
+slug: Web/API/HTMLTextAreaElement/selectionDirection
+page-type: web-api-instance-property
+browser-compat: api.HTMLTextAreaElement.selectionDirection
+---
+
+<!--  -->
+
+{{APIRef("HTML DOM")}}
+
+The **`selectionDirection`** 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 `<textarea>`s selected text.
+
+Setting the `selectionDirection` to a new value fires the {{domxref("HTMLTextAreaElement.selectionchange_event", "selectchange")}} and {{domxref("HTMLTextAreaElement.select_event", "select")}} events.
+
+## Value
+
+A string; `"forward"`, `"backward"`, or `"none"`.
+
+## Examples
+
+```js
+const textarea = document.getElementById("text-box");
+const end = textarea.selectionDirection;
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{HTMLElement("textarea")}}
+- {{domxref("HTMLTextAreaElement")}}
+- {{domxref("HTMLTextAreaElement.selectionStart")}}
+- {{domxref("HTMLTextAreaElement.selectionEnd")}}
+- {{domxref("HTMLTextAreaElement.textLength")}}
+- {{domxref("HTMLTextAreaElement.select()")}}
+- {{domxref("HTMLTextAreaElement.setSelectionRange()")}}
+- {{domxref("HTMLTextAreaElement.setRangeText()")}}
+- {{domxref("HTMLInputElement.selectionDirection")}}
+- {{domxref("Selection")}}
+- {{cssxref("::selection")}} pseudo-element

files/en-us/web/api/htmltextareaelement/selectionend/index.md

@@ -0,0 +1,53 @@
+---
+title: "HTMLTextAreaElement: selectionEnd property"
+short-title: selectionEnd
+slug: Web/API/HTMLTextAreaElement/selectionEnd
+page-type: web-api-instance-property
+browser-compat: api.HTMLTextAreaElement.selectionEnd
+---
+
+{{APIRef("HTML DOM")}}
+
+The **`selectionEnd`** property of the {{domxref("HTMLTextAreaElement")}} interface specifies the end position of the current text selection in a {{HTMLElement("textarea")}} element. It is a number representing the last index of the selected text. It can be used to both retrieve and set the index of the end of a `<textarea>`s selected text.
+
+When nothing is selected, the value of both the {{domxref("HTMLTextAreaElement.selectionStart", "selectionStart")}} and `selectionEnd` is the position of the cursor (caret) inside the `<textarea>` element.
+
+Setting `selectionEnd` to a value less than the current value of {{domxref("HTMLTextAreaElement.selectionStart", "selectionStart")}} updates both the the `selectionEnd` and `selectionStart` properties to that value. If both value are less than 0, both properties are set to the {{domxref("HTMLTextAreaElement.textLength", "textLength")}} property value.
+
+The property value can be retrieved and set without the `<textarea>` having focus, but the element does need to have focus for the {{cssxref("::selection")}} pseudo-element to match the selected text.
+
+Setting the `selectionEnd` to a new value fires the {{domxref("HTMLTextAreaElement.selectionchange_event", "selectchange")}} and {{domxref("HTMLTextAreaElement.select_event", "select")}} events.
+
+## Value
+
+A non-negative number.
+
+## Examples
+
+```js
+const textarea = document.getElementById("text-box");
+const end = textarea.selectionEnd;
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{HTMLElement("textarea")}}
+- {{domxref("HTMLTextAreaElement")}}
+- {{domxref("HTMLTextAreaElement.selectionStart")}}
+- {{domxref("HTMLTextAreaElement.selectionDirection")}}
+- {{domxref("HTMLTextAreaElement.textLength")}}
+- {{domxref("HTMLTextAreaElement.selectionChange_event", "selectionChange")}} event
+- {{domxref("HTMLTextAreaElement.select()")}}
+- {{domxref("HTMLTextAreaElement.setSelectionRange()")}}
+- {{domxref("HTMLTextAreaElement.setRangeText()")}}
+- {{domxref("HTMLInputElement.selectionEnd")}}
+- {{domxref("Selection")}}
+- {{cssxref("::selection")}} pseudo-element

files/en-us/web/api/htmltextareaelement/selectionstart/index.md

@@ -0,0 +1,52 @@
+---
+title: "HTMLTextAreaElement: selectionStart property"
+short-title: selectionStart
+slug: Web/API/HTMLTextAreaElement/selectionStart
+page-type: web-api-instance-property
+browser-compat: api.HTMLTextAreaElement.selectionStart
+---
+
+{{APIRef("HTML DOM")}}
+
+The **`selectionStart`** property of the {{domxref("HTMLTextAreaElement")}} interface specifies the start position of the current text selection in a {{HTMLElement("textarea")}} element. It is a number representing the beginning index of the selected text. It can be used to both retrieve and set the start of the index of the beginning of a `<textarea>`s selected text.
+
+When nothing is selected, the value of both the `selectionStart` and {{domxref("HTMLTextAreaElement.selectionEnd", "selectionEnd")}} is the position of the cursor (caret) inside the `<textarea>` element.
+
+Setting `selectionStart` to a value greater then the current value of {{domxref("HTMLTextAreaElement.selectionEnd", "selectionEnd")}} updates both the the `selectionStart` and `selectionEnd` properties to that value. If that value is equal to or greater than the {{domxref("HTMLTextAreaElement.textLength", "textLength")}}, both properties are both set to the `textLength` property value.
+
+The property value can be retrieved and set without the `<textarea>` having focus, but the element does need to have focus for the {{cssxref("::selection")}} pseudo-element to match the selected text.
+
+Setting the `selectionStart` to a new value fires the {{domxref("HTMLTextAreaElement.selectionchange_event", "selectchange")}} and {{domxref("HTMLTextAreaElement.select_event", "select")}}events.
+
+## Value
+
+A non-negative number.
+
+## Examples
+
+```js
+const textarea = document.getElementById("text-box");
+const start = textarea.selectionStart;
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{HTMLElement("textarea")}}
+- {{domxref("HTMLTextAreaElement")}}
+- {{domxref("HTMLTextAreaElement.selectionEnd")}}
+- {{domxref("HTMLTextAreaElement.selectionDirection")}}
+- {{domxref("HTMLTextAreaElement.textLength")}}
+- {{domxref("HTMLTextAreaElement.select()")}}
+- {{domxref("HTMLTextAreaElement.setSelectionRange()")}}
+- {{domxref("HTMLTextAreaElement.setRangeText()")}}
+- {{domxref("HTMLInputElement.selectionStart")}}
+- {{domxref("Selection")}}
+- {{cssxref("::selection")}} pseudo-element

files/en-us/web/api/htmltextareaelement/setrangetext/index.md

@@ -0,0 +1,98 @@
+---
+title: "HTMLTextAreaElement: setRangeText() method"
+short-title: setRangeText()
+slug: Web/API/HTMLTextAreaElement/setRangeText
+page-type: web-api-instance-method
+browser-compat: api.HTMLTextAreaElement.setRangeText
+---
+
+{{APIRef("HTML DOM")}}
+
+The **`setRangeText()`** method of the {{domxref("HTMLTextAreaElement")}} interface replaces a
+range of text in an {{HTMLElement("textarea")}} element with new text passed as the argument.
+
+Additional optional parameters include the start of the section of text to change, the end of the section, and a keyword defining what part of the `<textarea>` should be selected after the text is updated. If the `startSelection` and `endSelection` arguments are not provided, the range is assumed to be the selection.
+
+The final argument determines how the selection will be set after the text has been replaced. The possible values are `"select"`, which selects the newly inserted text, `"start"`, which moves the selection to just before the inserted text,`"end"`, which moves the selection to just after the inserted text, or the default, `"preserve"` , which tries to preserve the selection.
+
+In addition, the {{domxref("HTMLTextAreaElement.select_event", "select")}} and {{domxref("HTMLTextAreaElement.selectionchange_event", "selectchange")}} events are fired.
+
+## Syntax
+
+```js-nolint
+setRangeText(replacement)
+setRangeText(replacement, startSelection)
+setRangeText(replacement, startSelection, endSelection)
+setRangeText(replacement, startSelection, endSelection, selectMode)
+```
+
+### Parameters
+
+- `replacement`
+  - : The string to insert.
+- {{domxref("HTMLTextAreaElement.selectionStart", "selectionStart")}} {{optional_inline}}
+  - : The index of the first selected character. An index greater than the length
+    of the element's value is treated as pointing to the end of the value.
+- {{domxref("HTMLTextAreaElement.selectionEnd", "selectionEnd")}} {{optional_inline}}
+  - : The index of the character _after_ the last selected character. An
+    index greater than the length of the element's value is treated as pointing to the end
+    of the value. If `selectionEnd` is less than `selectionStart`, then both are treated as the value of `selectionEnd`.
+- `selectMode` {{optional_inline}}
+  - : A keyword, either `select`, `start`, `end`, or the default `preserve`, defining how the selection should be set after the text has been replaced.
+
+### Return value
+
+None ({{jsxref("undefined")}}).
+
+## Examples
+
+Click the button in this example to replace part of the text in the text box. The newly
+inserted text will be highlighted (selected) afterwards.
+
+### HTML
+
+```html
+<label for="ta">Example text input:</label>
+<textarea id="ta">
+  This text has NOT been updated.
+</textarea>
+<button id="btn">Update text</button>
+```
+
+### 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