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"
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)})`);
});
Specifications
| Specification |
|---|
| CSSOM View Module # dom-caretposition-getclientrect |