CaretPosition: offset-Eigenschaft

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Die offset-Eigenschaft des CaretPosition-Interfaces gibt eine ganze Zahl zurück, die den Versatz der Auswahl im Caret-Position-Knoten darstellt.

Dies wird der Zeichenversatz in einem Textknoten oder der Index des ausgewählten Kindknotens in einem Elementknoten sein.

Wert

Eine ganze Zahl.

Beispiele

Dieses Beispiel protokolliert das offsetNode und den offset der Caret-Position, wenn innerhalb des Eingabefelds 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;
}

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

Specification
CSSOM View Module # dom-caretposition-offset

CaretPosition: offset-Eigenschaft

Wert

Beispiele

Spezifikationen

Browser-Kompatibilität

Siehe auch