v152 · shipped · dom · text input

OpaqueRange

A new live range type for <textarea> and text <input> elements. Unlike DOM Range, an OpaqueRange operates over a form control's value text rather than DOM nodes — enabling getBoundingClientRect(), the CSS Highlights API, and anchored popovers for inline suggestions, AI autocomplete, and spell-check UIs.

Shipped in Chrome 152 OpaqueRange ships enabled by default in Chrome 152 (chromestatus milestone listing). It was in origin trial from Chrome 148; the API shape may still evolve in spec review. On Chrome 148–151, test with the #opaque-range flag.

at a glance

Shipped in	Chrome 152 (Enabled by default)
Origin trial from	Chrome 148 (desktop, Android)
Extends	`AbstractRange` (not `Range`)
Spec	whatwg/dom PR #1404 (under active spec discussion; see also whatwg/html #10614 and the MSEdge OpaqueRange explainer)
ChromeStatus	6297362687066112 — OpaqueRange

why it exists

Building inline-suggestion UI (AI autocomplete, spell-check, editor annotations) inside a <textarea> or <input> requires knowing the pixel position of a text offset in the control's value — but there is no standard API for that. Today developers work around this by mirroring the control's content into a hidden <div> overlay, measuring the clone, then positioning their UI relative to the clone. This is fragile and breaks whenever the control's font, padding, or scroll position differs from the mirror. OpaqueRange makes the browser do the geometry: create a range over value text offsets, call getBoundingClientRect(), and get the correct on-screen bounds. The range is live — its offsets stay valid as the value is edited.

Source: blink-dev Intent to Experiment — OpaqueRange, May 2026.

shape of the API

Creating an OpaqueRange

OpaqueRange objects are created via a new createValueRange() method on HTMLTextAreaElement and HTMLInputElement (text type):

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

// Create a range covering characters 4–12 in the textarea's value
const range = textarea.createValueRange(4, 12);

Getting geometry

// Returns the bounding rect of the text span in the control
const rect = range.getBoundingClientRect();

// Returns individual line-level rects (for multi-line spans)
const rects = range.getClientRects();

console.log('Text starts at:', rect.left, rect.top);

Using with the CSS Highlights API

// Highlight a range of value text (e.g., a misspelled word)
const range = textarea.createValueRange(7, 14);
const highlight = new Highlight(range);
CSS.highlights.set('spelling-error', highlight);

Live range behaviour

const range = textarea.createValueRange(3, 8);

// User types at position 0 → range offsets update automatically
textarea.value = 'AB' + textarea.value;  // inserts at start
// range now covers the same original text at new positions