CaretPosition: Methode getClientRect()

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.

Die getClientRect()-Methode der CaretPosition-Schnittstelle gibt das Client-Rechteck für den Caret-Bereich zurück.

Syntax

getClientRect()

Parameter

Keine.

Rückgabewert

Ein DOMRect-Objekt.

Beispiele

Position des Carets auf dem Bildschirm ermitteln

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 rect = caret.getClientRect();

  log(`Caret bounding rect: ${JSON.stringify(rect)}`);
  log(`Caret is at (${rect.x.toFixed(2)}, ${rect.y.toFixed(2)})`);
});

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-getclientrect

Browser-Kompatibilität

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden