v148 · Web APIs · DOM

OpaqueRange Geometry Playground

Adjust the start and end offsets to mark a text span inside the textarea, then inspect its getBoundingClientRect() and getClientRects() geometry — visualised as an overlay rectangle and a live coordinate readout.

Checking OpaqueRange / createValueRange support…
top—
left—
width—
height—
rects—

API

const textarea = document.querySelector('textarea');

// Create a range for characters 5–20 of the textarea's value
const range = textarea.createValueRange(5, 20);

// Geometry — same interface as Range
const rect = range.getBoundingClientRect();
const rects = range.getClientRects(); // per-line rects for multi-line spans

// The value itself is NOT exposed — startContainer / endContainer are null
// This is the "opaque" part: geometry without breaking form-control security

references

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗