demo · v148

Highlight Textarea

Type in the textarea, then select a substring. We try to materialise a Range over your selection and draw its bounding box on top of the textarea, and apply a CSS Custom Highlight to it where the browser supports the OpaqueRange path. Falls back to a synthetic overlay derived from the selection coordinates otherwise.

selection: — · bounding box: —

the code

const textarea = document.querySelector("textarea");
textarea.addEventListener("select", () => {
  const range = textarea.getOpaqueRange?.(textarea.selectionStart, textarea.selectionEnd);
  if (!range) return; // fallback path
  const rect = range.getBoundingClientRect();
  drawOverlay(rect);

  // Custom Highlight integration:
  if (CSS.highlights) {
    const h = new Highlight(range);
    CSS.highlights.set("opaque-range-demo", h);
  }
});

see also

implementation reference

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