files/en-us/web/api/caretposition/offsetnode/index.md
{{APIRef("CSSOM view API")}}
The offsetNode property of the {{domxref("CaretPosition")}} interface returns a {{domxref("Node")}} containing the found node at the caret's position.
A {{domxref("Node")}}.
This example logs the offsetNode and offset of the caret position when clicking inside the input field.
<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;
}
{{EmbedLiveSample("Examples", "", 300)}}
{{Specifications}}
{{Compat}}