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
js
getClientRect()
Parameters
None.
Return value
A DOMRect object.
Examples
Get the caret's screen position
html
<input aria-label="text field" value="Click inside this input field" />
js
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 |