Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
CaretPosition: offsetNode-Eigenschaft
Baseline
2025
Neu verfügbar
Seit December 2025 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.
Die offsetNode-Eigenschaft des CaretPosition-Interfaces gibt ein Node zurück, das den gefundenen Knoten an der Position des Cursors enthält.
Wert
Ein Node.
Beispiele
Dieses Beispiel protokolliert offsetNode und offset der Cursor-Position, wenn innerhalb des Eingabefeldes geklickt wird.
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;
}
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 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;
}
[フレーム]
Spezifikationen
| Spezifikation |
|---|
| CSSOM View Module # dom-caretposition-offsetnode |
Browser-Kompatibilität
JavaScript aktivieren, um diese Browser-Kompatibilitätstabelle anzuzeigen.