W3cubDocs

/Web APIs

CaretPosition: getClientRect() method

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

The getClientRect() method of the CaretPosition interface returns the client rectangle for the caret range.

Syntax

getClientRect()

Parameters

None.

Return value

A DOMRect object.

Examples

Get the caret's screen position

<input aria-label="text field" value="Click inside this input field" />

document.querySelector("input").addEventListener("click", (event) => {
  const x = event.clientX;
  const y = event.clientY;

  const caret = document.caretPositionFromPoint?.(x, y);
  if (!caret) {
    log("Not supported");
    return;
  }

  const rect = caret.getClientRect();

  log(`Caret bounding rect: ${JSON.stringify(rect)}`);
  log(`Caret is at (${rect.x.toFixed(2)}, ${rect.y.toFixed(2)})`);
});

Specifications

Specification
CSSOM View Module> # dom-caretposition-getclientrect>

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android	WebView on iOS
`getClientRect`	128	128	23	114	18.4	128	23	85	18.4	28.0	128	No