Introduction

Currently, there are many schools that have delivered software to require students do the exam online. However, the detection of candidates opening another browser tab during the exam is not very popular. Here is the example code to do this

Code

There are 2 solutions:

Solution 1 — Use the visibilitychange event to detect the user switching tabs

The first method is to use the visibilitychange method. This is the shortest and efficient solution.

document.addEventListener("visibilitychange", () => { // it could be either hidden or visible
   document.title = document.visibilityState;
}) 

Solution 2 — Use event blur or focus to detect user switching tabs

In addition to the above solution, we can add blur and focus events to the window to detect the user switching tabs/browser.

// when the user loses focus
window.addEventListener("blur", () => {
   document.title = "Breakup";
}); // when the user's focus is back to your tab (website) again
window.addEventListener("focus", () => {
document.title = "Patch Up";
});

It is very simple, right? If the application you are working on is related to this then give it a try!