OpaqueRange demo

The OpaqueRange API lets you create ranges over the value of <textarea> and <input> elements, enabling getBoundingClientRect() and the CSS Custom Highlight API to work directly on form controls without cloning elements. Give feedback on the feature.

⚠️ OpaqueRange is not supported in this browser. OpaqueRange is available in Microsoft Edge 148 and other Chromium-based browsers version 148 and later. Enable the Experimental Web Platform features flag at about://flags, or register for the Origin Trial.

Use case 1: Caret popup positioning

Type : in the textarea or the input field below to trigger an emoji picker positioned at the caret.

Textarea

Input

Use case 2: Search highlighting

Type a search term in the search box below. All matching occurrences in the textarea are highlighted in real time using the CSS Custom Highlight API with OpaqueRange.

Search:

Use case 3: Live range tracking

OpaqueRange is live: it automatically updates its offsets as the content changes via interactive edits (typing, backspace, delete) or setRangeText(). Click Highlight "world" to highlight the word, then type before it and watch the highlight follow.

Use case 4: Disconnecting an OpaqueRange

Calling range.disconnect() detaches the range from its element. The offsets reset to 0, geometry becomes empty, and the range stops receiving live updates. Create a range, then disconnect it and observe the change.