Codestin Search App

HTML onbeforematch Event Attribute

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The onbeforematch event attribute is an HTML event handler that is triggered before a text match is highlighted in a document as part of a find-in-page operation (such as when a user uses Ctrl+F or the Find API). It allows developers to execute JavaScript just before the browser scrolls to or highlights a matching element.

This event is relatively new and is primarily supported in modern browsers like Chrome (and Chromium-based browsers). Its purpose is to give developers a chance to manipulate or modify content before it becomes a match, such as dynamically loading content or highlighting hidden elements.

Key Points

Event Type: Event (bubbles: true, cancelable: false)
Default Action: None. You cannot cancel the browser’s find behavior.
Use Case: Useful when you have lazy-loaded content or hidden elements that should be revealed when a user searches for them.

How It Works

When a browser’s find operation identifies a potential match in the document:

The onbeforematch event fires on the element containing the match.
You can execute JavaScript to make the element visible, load content, or apply styles.
After your code runs, the browser continues with the default find-and-highlight action.

HTML Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onbeforematch Example</title>
<style>
.hidden {
    display: none;
    background-color: yellow;
}
</style>
</head>
<body>

<p>This is a paragraph with some searchable text.</p>

<div id="lazy-content" class="hidden" onbeforematch="this.style.display='block';">
  This content was hidden but will appear if searched.
</div>

<p>Try searching for the word "hidden" in this page using Ctrl+F.</p>

</body>
</html>

Explanation:

The div with id="lazy-content" is initially hidden.
When a user searches for "hidden" using the browser’s find tool, the onbeforematch event triggers.
The inline JavaScript sets display='block', revealing the hidden content so the browser can highlight it.

JavaScript Example

You can also attach it programmatically:

const lazyDiv = document.getElementById('lazy-content');
lazyDiv.onbeforematch = () => {
    lazyDiv.style.display = 'block';
};

Typical Use Cases

Lazy-loading content: Load hidden sections of the page only when a search target exists.
Dynamic styling: Highlight elements in a special way when they are about to be matched.
Expandable menus or accordions: Automatically open hidden panels if they contain the search text.

Syntax

<div hidden="until-found" onbeforematch="script(event)">This content is hidden but searchable.</div>

Values

scriptThe name of the script to use when the event has been triggered.

Example

HTML

<a href="#target" style="display: block; margin-bottom: 20px; color: blue; text-decoration: underline;">

  Click here to jump to the hidden "Secret" section

</a>



<div style="height: 100vh;">

  <p>Scroll down or click the link above...</p>

</div>



<section 

  id="target" 

  hidden="until-found" 

  onbeforematch="revealHighlight()" 

  style="padding: 20px; border: 2px solid gold; background: #fffde7;">

  

  <h2>🌟 Found Me!</h2>

  <p>The <strong>onbeforematch</strong> event just fired because you navigated to this ID.</p>

</section>



<script>

  function revealHighlight() {

    // This code runs the moment the browser prepares to "jump" to the ID

    console.log("Event: onbeforematch triggered!");

    

    // Optional: Add a visual flair to show the event worked

    document.getElementById('target').style.boxShadow = "0 0 20px rgba(255, 215, 0, 0.8)";

  }

</script>

Result

Editor

Browser Support

The following information will show you the current browser support for the HTML onbeforematch event attribute. Hover over a browser icon to see the version that first introduced support for this HTML event attribute.