mdn · sideshowbarker · Jul 25, 2025 · Jul 25, 2025 · Jul 25, 2025 · Jul 25, 2025
@@ -0,0 +1,65 @@
+---
+title: "CaretPosition: getClientRect() method"
+short-title: getClientRect()
+slug: Web/API/CaretPosition/getClientRect
+page-type: web-api-instance-method
+browser-compat: api.CaretPosition.getClientRect
+---
+
+The `getClientRect()` method of the {{domxref("CaretPosition")}} interface returns the client rectangle for the caret range.
+
+## Syntax
+
+```js-nolint
+getClientRect()
+```
+
+### Parameters
+
+None.
+
+### Return value
+
+A {{domxref("DOMRect")}} object.
+
+## Examples
+
+### Get the caret's screen position
+
+```html
+<input
+  aria-label="text field"
+  value="Click inside this input field"
+  style="width: 100%; padding: 10px; font-size: 16px; box-sizing: border-box" />
+```
+
+```js
+document.querySelector("input").addEventListener("click", (event) => {
+  const x = event.clientX;
+  const y = event.clientY;
+
+  const caret = document.caretPositionFromPoint?.(x, y);
+  if (!caret) return;
+
+  const rect = caret.getClientRect();
+
+  console.dir("Caret bounding rect:", rect);
+  console.log(`Caret is at (${rect.x.toFixed(2)}, ${rect.y.toFixed(2)})`);
+});
+```
+
+{{EmbedLiveSample("get_client_rect", "", 300)}}
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("DOMRect")}}
+- {{domxref("Document.caretPositionFromPoint()")}}
+- {{domxref("Element.getBoundingClientRect()")}}
@@ -0,0 +1,57 @@
+---
+title: "CaretPosition: offset property"
+short-title: offset
+slug: Web/API/CaretPosition/offset
+page-type: web-api-instance-property
+browser-compat: api.CaretPosition.offset
+---
+
+The **`offset`** property of the {{domxref("CaretPosition")}} interface returns an integer representing the offset of the selection in the caret position node.
+
+This will be the character offset in a text node or the selected child node's index in an element node.
+
+## Value
+
+An integer.
+
+## Examples
+
+This example logs the `offsetNode` and `offset` of the caret position when clicking inside the input field
+
+```html
+<input
+  aria-label="text field"
+  value="Click inside this input field"
+  style="width: 100%; padding: 10px; font-size: 16px; box-sizing: border-box" />
+```
+
+```js
+document.querySelector("input").addEventListener("click", (event) => {
+  const x = event.clientX;
+  const y = event.clientY;
+
+  const caret = document.caretPositionFromPoint?.(x, y);
+  if (!caret) return;
+
+  const node = caret.offsetNode;
+  const offset = caret.offset;
+
+  console.log("offsetNode:", node);
+  console.log("offset:", offset);
+});
+```
+
+{{EmbedLiveSample("offset", "", 300)}}
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("Node")}}
+- {{domxref("Document.caretPositionFromPoint()")}}
@@ -0,0 +1,55 @@
+---
+title: "CaretPosition: offsetNode property"
+short-title: offsetNode
+slug: Web/API/CaretPosition/offsetNode
+page-type: web-api-instance-property
+browser-compat: api.CaretPosition.offsetNode
+---
+
+The **`offsetNode`** property of the {{domxref("CaretPosition")}} interface returns a {{domxref("Node")}} containing the found node at the caret's position.
+
+## Value
+
+A {{domxref("Node")}}.
+
+## Examples
+
+This example logs the `offsetNode` and `offset` of the caret position when clicking inside the input field
+
+```html
+<input
+  aria-label="text field"
+  value="Click inside this input field"
+  style="width: 100%; padding: 10px; font-size: 16px; box-sizing: border-box" />
+```
+
+```js
+document.querySelector("input").addEventListener("click", (event) => {
+  const x = event.clientX;
+  const y = event.clientY;
+
+  const caret = document.caretPositionFromPoint?.(x, y);
+  if (!caret) return;
+
+  const node = caret.offsetNode;
+  const offset = caret.offset;
+
+  console.log("offsetNode:", node);
+  console.log("offset:", offset);
+});
+```
+
+{{EmbedLiveSample("offsetnode", "", 300)}}
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("Node")}}
+- {{domxref("Document.caretPositionFromPoint()")}}