Skip to content

Commit fe8ade9

Browse files
estellesideshowbarker
authored and
fiji-flo
committed
New pages: textareaelement API selection (#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 <mike@w3.org> * Update files/en-us/web/api/htmltextareaelement/setselectionrange/index.md Co-authored-by: sideshowbarker <mike@w3.org> * Update files/en-us/web/api/htmltextareaelement/setselectionrange/index.md Co-authored-by: sideshowbarker <mike@w3.org> * Update files/en-us/web/api/htmltextareaelement/setselectionrange/index.md Co-authored-by: sideshowbarker <mike@w3.org> * typo in link * typo in link * typo in link --------- Co-authored-by: sideshowbarker <mike@w3.org>
1 parent f001576 commit fe8ade9

File tree

9 files changed

+392
-1
lines changed

9 files changed

+392
-1
lines changed

‎files/en-us/web/api/htmloptionscollection/index.md

+3-1
Original file line numberDiff line numberDiff line change
@@ -30,4 +30,6 @@ _This interface inherits the methods of its parent, [`HTMLCollection`](/en-US/do
3030

3131
## See also
3232

33-
- [HTMLCollection](/en-US/docs/Web/API/HTMLCollection)
33+
- {{DOMxRef("HTMLOptionElement")}}
34+
- {{DOMxRef("HTMLCollection")}}
35+
- [Indexed collections guide](/en-US/docs/Web/JavaScript/Guide/Indexed_collections)

‎files/en-us/web/api/htmlselectelement/selectedindex/index.md

+6
Original file line numberDiff line numberDiff line change
@@ -56,3 +56,9 @@ selectElem.addEventListener("change", () => {
5656
## Browser compatibility
5757

5858
{{Compat}}
59+
60+
## See also
61+
62+
- {{DOMxRef("HTMLSelectElement")}}
63+
- {{DOMxRef("HTMLOptionElement")}}
64+
- {{DOMxRef("HTMLOptionsCollection")}}

‎files/en-us/web/api/htmltextareaelement/select/index.md

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
---
2+
title: "HTMLTextAreaElement: select() method"
3+
short-title: select()
4+
slug: Web/API/HTMLTextAreaElement/select
5+
page-type: web-api-instance-method
6+
browser-compat: api.HTMLTextAreaElement.select
7+
---
8+
9+
{{APIRef("HTML DOM")}}
10+
11+
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.
12+
13+
## Syntax
14+
15+
```js-nolint
16+
select()
17+
```
18+
19+
### Parameters
20+
21+
None.
22+
23+
### Return value
24+
25+
None ({{jsxref("undefined")}}).
26+
27+
## Examples
28+
29+
```js
30+
const textarea = document.getElementById("text-box");
31+
textarea.select();
32+
```
33+
34+
## Specifications
35+
36+
{{Specifications}}
37+
38+
## Browser compatibility
39+
40+
{{Compat}}
41+
42+
## See also
43+
44+
- {{HTMLElement("textarea")}}
45+
- {{domxref("HTMLTextAreaElement/select_event", "select")}} event
46+
- {{domxref("EventTarget.addEventListener", "addEventListener()")}}
47+
- CSS {{cssxref("::selection")}} pseudo-element

‎files/en-us/web/api/htmltextareaelement/select_event/index.md

+4
Original file line numberDiff line numberDiff line change
@@ -64,3 +64,7 @@ textarea.onselect = logSelection;
6464
## Browser compatibility
6565

6666
{{Compat}}
67+
68+
## See also
69+
70+
- {{domxref("HTMLTextAreaElement.select()")}}

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

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
---
2+
title: "HTMLTextAreaElement: selectionDirection property"
3+
short-title: selectionDirection
4+
slug: Web/API/HTMLTextAreaElement/selectionDirection
5+
page-type: web-api-instance-property
6+
browser-compat: api.HTMLTextAreaElement.selectionDirection
7+
---
8+
9+
<!-- -->
10+
11+
{{APIRef("HTML DOM")}}
12+
13+
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.
14+
15+
Setting the `selectionDirection` to a new value fires the {{domxref("HTMLTextAreaElement.selectionchange_event", "selectchange")}} and {{domxref("HTMLTextAreaElement.select_event", "select")}} events.
16+
17+
## Value
18+
19+
A string; `"forward"`, `"backward"`, or `"none"`.
20+
21+
## Examples
22+
23+
```js
24+
const textarea = document.getElementById("text-box");
25+
const end = textarea.selectionDirection;
26+
```
27+
28+
## Specifications
29+
30+
{{Specifications}}
31+
32+
## Browser compatibility
33+
34+
{{Compat}}
35+
36+
## See also
37+
38+
- {{HTMLElement("textarea")}}
39+
- {{domxref("HTMLTextAreaElement")}}
40+
- {{domxref("HTMLTextAreaElement.selectionStart")}}
41+
- {{domxref("HTMLTextAreaElement.selectionEnd")}}
42+
- {{domxref("HTMLTextAreaElement.textLength")}}
43+
- {{domxref("HTMLTextAreaElement.select()")}}
44+
- {{domxref("HTMLTextAreaElement.setSelectionRange()")}}
45+
- {{domxref("HTMLTextAreaElement.setRangeText()")}}
46+
- {{domxref("HTMLInputElement.selectionDirection")}}
47+
- {{domxref("Selection")}}
48+
- {{cssxref("::selection")}} pseudo-element

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

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
---
2+
title: "HTMLTextAreaElement: selectionEnd property"
3+
short-title: selectionEnd
4+
slug: Web/API/HTMLTextAreaElement/selectionEnd
5+
page-type: web-api-instance-property
6+
browser-compat: api.HTMLTextAreaElement.selectionEnd
7+
---
8+
9+
{{APIRef("HTML DOM")}}
10+
11+
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.
12+
13+
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.
14+
15+
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.
16+
17+
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.
18+
19+
Setting the `selectionEnd` to a new value fires the {{domxref("HTMLTextAreaElement.selectionchange_event", "selectchange")}} and {{domxref("HTMLTextAreaElement.select_event", "select")}} events.
20+
21+
## Value
22+
23+
A non-negative number.
24+
25+
## Examples
26+
27+
```js
28+
const textarea = document.getElementById("text-box");
29+
const end = textarea.selectionEnd;
30+
```
31+
32+
## Specifications
33+
34+
{{Specifications}}
35+
36+
## Browser compatibility
37+
38+
{{Compat}}
39+
40+
## See also
41+
42+
- {{HTMLElement("textarea")}}
43+
- {{domxref("HTMLTextAreaElement")}}
44+
- {{domxref("HTMLTextAreaElement.selectionStart")}}
45+
- {{domxref("HTMLTextAreaElement.selectionDirection")}}
46+
- {{domxref("HTMLTextAreaElement.textLength")}}
47+
- {{domxref("HTMLTextAreaElement.selectionChange_event", "selectionChange")}} event
48+
- {{domxref("HTMLTextAreaElement.select()")}}
49+
- {{domxref("HTMLTextAreaElement.setSelectionRange()")}}
50+
- {{domxref("HTMLTextAreaElement.setRangeText()")}}
51+
- {{domxref("HTMLInputElement.selectionEnd")}}
52+
- {{domxref("Selection")}}
53+
- {{cssxref("::selection")}} pseudo-element

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

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
---
2+
title: "HTMLTextAreaElement: selectionStart property"
3+
short-title: selectionStart
4+
slug: Web/API/HTMLTextAreaElement/selectionStart
5+
page-type: web-api-instance-property
6+
browser-compat: api.HTMLTextAreaElement.selectionStart
7+
---
8+
9+
{{APIRef("HTML DOM")}}
10+
11+
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.
12+
13+
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.
14+
15+
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.
16+
17+
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.
18+
19+
Setting the `selectionStart` to a new value fires the {{domxref("HTMLTextAreaElement.selectionchange_event", "selectchange")}} and {{domxref("HTMLTextAreaElement.select_event", "select")}}events.
20+
21+
## Value
22+
23+
A non-negative number.
24+
25+
## Examples
26+
27+
```js
28+
const textarea = document.getElementById("text-box");
29+
const start = textarea.selectionStart;
30+
```
31+
32+
## Specifications
33+
34+
{{Specifications}}
35+
36+
## Browser compatibility
37+
38+
{{Compat}}
39+
40+
## See also
41+
42+
- {{HTMLElement("textarea")}}
43+
- {{domxref("HTMLTextAreaElement")}}
44+
- {{domxref("HTMLTextAreaElement.selectionEnd")}}
45+
- {{domxref("HTMLTextAreaElement.selectionDirection")}}
46+
- {{domxref("HTMLTextAreaElement.textLength")}}
47+
- {{domxref("HTMLTextAreaElement.select()")}}
48+
- {{domxref("HTMLTextAreaElement.setSelectionRange()")}}
49+
- {{domxref("HTMLTextAreaElement.setRangeText()")}}
50+
- {{domxref("HTMLInputElement.selectionStart")}}
51+
- {{domxref("Selection")}}
52+
- {{cssxref("::selection")}} pseudo-element

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

+98
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
---
2+
title: "HTMLTextAreaElement: setRangeText() method"
3+
short-title: setRangeText()
4+
slug: Web/API/HTMLTextAreaElement/setRangeText
5+
page-type: web-api-instance-method
6+
browser-compat: api.HTMLTextAreaElement.setRangeText
7+
---
8+
9+
{{APIRef("HTML DOM")}}
10+
11+
The **`setRangeText()`** method of the {{domxref("HTMLTextAreaElement")}} interface replaces a
12+
range of text in an {{HTMLElement("textarea")}} element with new text passed as the argument.
13+
14+
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.
15+
16+
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.
17+
18+
In addition, the {{domxref("HTMLTextAreaElement.select_event", "select")}} and {{domxref("HTMLTextAreaElement.selectionchange_event", "selectchange")}} events are fired.
19+
20+
## Syntax
21+
22+
```js-nolint
23+
setRangeText(replacement)
24+
setRangeText(replacement, startSelection)
25+
setRangeText(replacement, startSelection, endSelection)
26+
setRangeText(replacement, startSelection, endSelection, selectMode)
27+
```
28+
29+
### Parameters
30+
31+
- `replacement`
32+
- : The string to insert.
33+
- {{domxref("HTMLTextAreaElement.selectionStart", "selectionStart")}} {{optional_inline}}
34+
- : The index of the first selected character. An index greater than the length
35+
of the element's value is treated as pointing to the end of the value.
36+
- {{domxref("HTMLTextAreaElement.selectionEnd", "selectionEnd")}} {{optional_inline}}
37+
- : The index of the character _after_ the last selected character. An
38+
index greater than the length of the element's value is treated as pointing to the end
39+
of the value. If `selectionEnd` is less than `selectionStart`, then both are treated as the value of `selectionEnd`.
40+
- `selectMode` {{optional_inline}}
41+
- : A keyword, either `select`, `start`, `end`, or the default `preserve`, defining how the selection should be set after the text has been replaced.
42+
43+
### Return value
44+
45+
None ({{jsxref("undefined")}}).
46+
47+
## Examples
48+
49+
Click the button in this example to replace part of the text in the text box. The newly
50+
inserted text will be highlighted (selected) afterwards.
51+
52+
### HTML
53+
54+
```html
55+
<label for="ta">Example text input:</label>
56+
<textarea id="ta">
57+
This text has NOT been updated.
58+
</textarea>
59+
<button id="btn">Update text</button>
60+
```
61+
62+
### JavaScript
63+
64+
```js
65+
const btn = document.getElementById("btn");
66+
67+
btn.addEventListener("click", () => {
68+
changeText();
69+
});
70+
71+
function changeText() {
72+
const textarea = document.getElementById("text-box");
73+
textarea.focus();
74+
textarea.setRangeText("ALREADY", 14, 17, "select");
75+
}
76+
```
77+
78+
### Result
79+
80+
{{EmbedLiveSample("Examples")}}
81+
82+
## Specifications
83+
84+
{{Specifications}}
85+
86+
## Browser compatibility
87+
88+
{{Compat}}
89+
90+
## See also
91+
92+
- {{HTMLElement("textarea")}}
93+
- {{domxref("HTMLTextAreaElement")}}
94+
- {{domxref("HTMLTextAreaElement.select()")}}
95+
- {{domxref("HTMLTextAreaElement.setSelectionRange()")}}
96+
- {{domxref("HTMLTextAreaElement.textLength")}}
97+
- {{domxref("Selection")}}
98+
- {{cssxref("::selection")}} pseudo-element

0 commit comments

Comments
 (0)