New pages: textareaelement API selection

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,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 `<textarea>`s selected text.
+
+Setting the `direction` to a new value fires the {{domxref("HTMLTextAreaElement.selectchange_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.direction;
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{HTMLElement("textarea")}}
+- {{domxref("HTMLTextAreaElement")}}
+- {{domxref("HTMLTextAreaElement.selectionStart")}}
+- {{domxref("HTMLTextAreaElement.selectionEnd")}}
+- {{domxref("HTMLTextAreaElement.textLength")}}
+- {{domxref("HTMLTextAreaElement.selectionChange()")}}
+- {{domxref("HTMLTextAreaElement.select()")}}
+- {{HTMLElement("HTMLInputElement.direction")}}
+- {{domxref("Selection")}}
+- {{cssxref("::selection")}} pseudo-element

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

@@ -0,0 +1,51 @@
+---
+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.selectchange_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()")}}
+- {{domxref("HTMLTextAreaElement.select()")}}
+- {{HTMLElement("HTMLInputElement.selectionEnd")}}
+- {{domxref("Selection")}}
+- {{cssxref("::selection")}} pseudo-element

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

@@ -0,0 +1,51 @@
+---
+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.selectchange_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.selectionChange()")}}
+- {{domxref("HTMLTextAreaElement.select()")}}
+- {{HTMLElement("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 start and end 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.selectchange_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