An element receives abeforematch event when it is in thehidden until found state and the browser is about to reveal its content because the user has found the content through the "find in page" feature or through fragment navigation.

Syntax

Use the event name in methods likeaddEventListener(), or set an event handler property.

addEventListener("beforematch", (event) => { })onbeforematch = (event) => { }

Event type

A genericEvent.

Usage notes

The HTMLhidden attribute accepts a valueuntil-found: when this value is specified, the element is hidden but its content will be accessible to the browser's "find in page" feature or to fragment navigation. When these features cause a scroll to an element in a "hidden until found" subtree, the browser will:

1. Fire abeforematch event on the hidden element
2. Remove thehidden attribute from the element
3. Scroll to the element

Examples

Using beforematch

In this example, we have two<div> elements.The first is visible, while the second has thehidden="until-found" andid="until-found-box" attributes.The element with auntil-found-box id has a dotted red border and a gray background.

We also have a link that targets the"until-found-box" fragment and JavaScript that listens for thebeforematch event firing on that hidden element.The event handler changes the text content of the box to illustrate an action that can occur when thehidden until found state is about to be removed.

HTML

<a href="#until-found-box">Go to hidden content</a><div>I'm not hidden</div><div hidden="until-found">Hidden until found</div>

<button>Reset</button>

CSS

div {  height: 40px;  width: 300px;  border: 5px dashed black;  margin: 1rem 0;  padding: 1rem;  font-size: 2rem;}div#until-found-box {  color: red;  border: 5px dotted red;  background-color: lightgray;}

JavaScript

const untilFound = document.querySelector("#until-found-box");untilFound.addEventListener(  "beforematch",  () => (untilFound.textContent = "I've been revealed!"),);

document.querySelector("#reset").addEventListener("click", () => {  document.location.hash = "";  document.location.reload();});

Result

Clicking the "Go to hidden content" button navigates to the element in thehidden until found state.Thebeforematch event fires, the text content is updated, and then the element's content is displayed (thehidden attribute is removed).

To run the example again, click "Reload".

If your browser does not support the"until-found" enumerated value of thehidden attribute, the second<div> will be hidden (ashidden was boolean prior to the addition of theuntil-found value).

Specifications

Browser compatibility

See also

• The HTMLhidden attribute