RTO_DOM_highlight.js

Helper file documentation for RTO_DOM_highlight.js.
Docs updated: 2026-03-24

Summary

Highlight one or many selectors inside a controlled tab.

  • Exports: RTOHighlight, RTOUnhighlight, RTOHighlightMany, RTOUnhighlightMany
  • Depends on: RTO_form_api.js
  • Auto-binds: buttons with data-rto-highlight and data-rto-highlight-many
  • Uses data attributes: data-rto-highlight, data-rto-highlight-many, data-rto-ms, data-rto-tabKey (recommended), data-rto-tabkey (legacy), data-rto-key (legacy)

What it is

Quick helper to highlight one or several elements inside a controlled tab (useful for debugging selectors).

Download

Download RTO_DOM_highlight.js

Example

Below are 3 ways to run highlights: auto-bind on a single selector, auto-bind on multiple selectors, and programmatic JS calls.

<!-- Auto-bind: highlight a single selector -->
<button data-rto-tabKey="app" data-rto-highlight="#submit" data-rto-ms="1200">Highlight submit</button>
<!-- Auto-bind: highlight several selectors at once -->
<button data-rto-tabKey="app" data-rto-highlight-many="#email #password #submit" data-rto-ms="1200">Highlight form fields</button>

<!-- Required dependency -->
<script src="../RTO_helpers/RTO_form_api.js"></script>
<script src="../RTO_helpers/RTO_DOM_highlight.js"></script>

<script>
  // Programmatic API: one selector
  RTOHighlight("#submit", { "tabKey": "app" });
  // Programmatic API: selector list
  RTOHighlightMany(["#email", "#password"], { "tabKey": "app", "ms": 1200 });
</script>
<!-- 3 form fields to highlight together -->
<input type="text" id="demo-name" value="Alice">
<select id="demo-country">
  <option value="be">Belgium</option>
  <option value="fr">France</option>
</select>
<textarea id="demo-notes">Notes...</textarea>

<!-- Auto-bind highlight button (many selectors) -->
<button
  data-rto-tabKey="app"
  data-rto-highlight-many="#demo-name #demo-country #demo-notes"
  data-rto-ms="1500">
  Highlight input + select + textarea
</button>
<!-- Manual clear button -->
<button id="clear-demo-fields-highlight">Clear highlight</button>

<!-- Required dependency -->
<script src="../RTO_helpers/RTO_form_api.js"></script>
<script src="../RTO_helpers/RTO_DOM_highlight.js"></script>
<script>
  // Remove highlight from all 3 fields on demand.
  document.getElementById("clear-demo-fields-highlight").addEventListener("click", function(){
    RTOUnhighlightMany(["#demo-name", "#demo-country", "#demo-notes"], { "tabKey": "app" });
  });
</script>

Data attributes

  • data-rto-highlight : single selector (example: #submit)
  • data-rto-highlight-many : selector list (array or string list separated by spaces, commas, or |)
  • data-rto-ms : duration in ms (optional)
  • data-rto-tabKey : tabKey (recommended)
  • data-rto-tabkey : legacy alias (accepted)
  • data-rto-key : legacy alias (accepted)

Next