CaretPosition: offsetNode property

Baseline 2025

Newly available

Since December 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Learn more
See full compatibility

The offsetNode property of the CaretPosition interface returns a Node containing the found node at the caret's position.

Value

A 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" />

<pre id="log"></pre>

input {
 width: 100%;
 padding: 10px;
 font-size: 16px;
 box-sizing: border-box;
}
#log {
 height: 200px;
 overflow: scroll;
 padding: 0.5rem;
 border: 1px solid black;
}

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 node = caret.offsetNode;
 const offset = caret.offset;
 log(`offsetNode: ${node}`);
 log(`offset: ${offset}`);
});

const logElement = document.querySelector("#log");
function log(text) {
 logElement.innerText = `${logElement.innerText}${text}\n`;
 logElement.scrollTop = logElement.scrollHeight;
}

[フレーム]