v152 · Web APIs · OpaqueRange Demo

OpaqueRange Demo

Create an OpaqueRange by specifying start and end offsets within a textarea's value. Query its bounding rect and see the range visualised as an overlay on the textarea.

Checking OpaqueRange support…

textarea

Type in the textarea, then create a range by offset

range controls

Set range start and end offsets (character positions in the textarea value)

OpaqueRange.getBoundingClientRect() result
Click "Create OpaqueRange" to see results

code

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

// Create OpaqueRange: character offsets into the textarea value
// (NOT the DOM — offsets are into the form control's string value)
const range = textarea.createOpaqueRange(4, 19);

// Geometry API — same shape as Range
const rect = range.getBoundingClientRect();
// → DOMRect { x, y, width, height, top, right, bottom, left }

// Visual overlay example
const overlay = document.createElement('div');
overlay.style.position = 'absolute';
overlay.style.left = (rect.left - textareaRect.left) + 'px';
overlay.style.top  = (rect.top  - textareaRect.top ) + 'px';
overlay.style.width  = rect.width  + 'px';
overlay.style.height = rect.height + 'px';
overlay.style.background = 'rgba(0, 100, 255, 0.2)';

see also