Skip to content

Commit 1dd95ad

Browse files
yashrajbhartiyashrajbharti
authored
Feat: Caret Position Web APIs (#40527)
1 parent ca93613 commit 1dd95ad

File tree

3 files changed

+177
-0
lines changed

3 files changed

+177
-0
lines changed

‎files/en-us/web/api/caretposition/getclientrect/index.md

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
---
2+
title: "CaretPosition: getClientRect() method"
3+
short-title: getClientRect()
4+
slug: Web/API/CaretPosition/getClientRect
5+
page-type: web-api-instance-method
6+
browser-compat: api.CaretPosition.getClientRect
7+
---
8+
9+
The `getClientRect()` method of the {{domxref("CaretPosition")}} interface returns the client rectangle for the caret range.
10+
11+
## Syntax
12+
13+
```js-nolint
14+
getClientRect()
15+
```
16+
17+
### Parameters
18+
19+
None.
20+
21+
### Return value
22+
23+
A {{domxref("DOMRect")}} object.
24+
25+
## Examples
26+
27+
### Get the caret's screen position
28+
29+
```html
30+
<input
31+
aria-label="text field"
32+
value="Click inside this input field"
33+
style="width: 100%; padding: 10px; font-size: 16px; box-sizing: border-box" />
34+
```
35+
36+
```js
37+
document.querySelector("input").addEventListener("click", (event) => {
38+
const x = event.clientX;
39+
const y = event.clientY;
40+
41+
const caret = document.caretPositionFromPoint?.(x, y);
42+
if (!caret) return;
43+
44+
const rect = caret.getClientRect();
45+
46+
console.dir("Caret bounding rect:", rect);
47+
console.log(`Caret is at (${rect.x.toFixed(2)}, ${rect.y.toFixed(2)})`);
48+
});
49+
```
50+
51+
{{EmbedLiveSample("get_client_rect", "", 300)}}
52+
53+
## Specifications
54+
55+
{{Specifications}}
56+
57+
## Browser compatibility
58+
59+
{{Compat}}
60+
61+
## See also
62+
63+
- {{domxref("DOMRect")}}
64+
- {{domxref("Document.caretPositionFromPoint()")}}
65+
- {{domxref("Element.getBoundingClientRect()")}}

‎files/en-us/web/api/caretposition/offset/index.md

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
---
2+
title: "CaretPosition: offset property"
3+
short-title: offset
4+
slug: Web/API/CaretPosition/offset
5+
page-type: web-api-instance-property
6+
browser-compat: api.CaretPosition.offset
7+
---
8+
9+
The **`offset`** property of the {{domxref("CaretPosition")}} interface returns an integer representing the offset of the selection in the caret position node.
10+
11+
This will be the character offset in a text node or the selected child node's index in an element node.
12+
13+
## Value
14+
15+
An integer.
16+
17+
## Examples
18+
19+
This example logs the `offsetNode` and `offset` of the caret position when clicking inside the input field
20+
21+
```html
22+
<input
23+
aria-label="text field"
24+
value="Click inside this input field"
25+
style="width: 100%; padding: 10px; font-size: 16px; box-sizing: border-box" />
26+
```
27+
28+
```js
29+
document.querySelector("input").addEventListener("click", (event) => {
30+
const x = event.clientX;
31+
const y = event.clientY;
32+
33+
const caret = document.caretPositionFromPoint?.(x, y);
34+
if (!caret) return;
35+
36+
const node = caret.offsetNode;
37+
const offset = caret.offset;
38+
39+
console.log("offsetNode:", node);
40+
console.log("offset:", offset);
41+
});
42+
```
43+
44+
{{EmbedLiveSample("offset", "", 300)}}
45+
46+
## Specifications
47+
48+
{{Specifications}}
49+
50+
## Browser compatibility
51+
52+
{{Compat}}
53+
54+
## See also
55+
56+
- {{domxref("Node")}}
57+
- {{domxref("Document.caretPositionFromPoint()")}}

‎files/en-us/web/api/caretposition/offsetnode/index.md

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
---
2+
title: "CaretPosition: offsetNode property"
3+
short-title: offsetNode
4+
slug: Web/API/CaretPosition/offsetNode
5+
page-type: web-api-instance-property
6+
browser-compat: api.CaretPosition.offsetNode
7+
---
8+
9+
The **`offsetNode`** property of the {{domxref("CaretPosition")}} interface returns a {{domxref("Node")}} containing the found node at the caret's position.
10+
11+
## Value
12+
13+
A {{domxref("Node")}}.
14+
15+
## Examples
16+
17+
This example logs the `offsetNode` and `offset` of the caret position when clicking inside the input field
18+
19+
```html
20+
<input
21+
aria-label="text field"
22+
value="Click inside this input field"
23+
style="width: 100%; padding: 10px; font-size: 16px; box-sizing: border-box" />
24+
```
25+
26+
```js
27+
document.querySelector("input").addEventListener("click", (event) => {
28+
const x = event.clientX;
29+
const y = event.clientY;
30+
31+
const caret = document.caretPositionFromPoint?.(x, y);
32+
if (!caret) return;
33+
34+
const node = caret.offsetNode;
35+
const offset = caret.offset;
36+
37+
console.log("offsetNode:", node);
38+
console.log("offset:", offset);
39+
});
40+
```
41+
42+
{{EmbedLiveSample("offsetnode", "", 300)}}
43+
44+
## Specifications
45+
46+
{{Specifications}}
47+
48+
## Browser compatibility
49+
50+
{{Compat}}
51+
52+
## See also
53+
54+
- {{domxref("Node")}}
55+
- {{domxref("Document.caretPositionFromPoint()")}}

0 commit comments

Comments
 (0)