Limited availability
The offsetNode property of the CaretPosition interface returns a Node containing the found node at the caret's position.
A 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" />
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;
}
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4