Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
CaretPosition: Methode getClientRect()
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 getClientRect()-Methode der CaretPosition-Schnittstelle gibt das Client-Rechteck für den Caret-Bereich zurück.
Syntax
js
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;
}
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 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
| Spezifikation |
|---|
| CSSOM View Module # dom-caretposition-getclientrect |
Browser-Kompatibilität
JavaScript aktivieren, um diese Browser-Kompatibilitätstabelle anzuzeigen.