Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html lang="en"> <head> <title>Focus and Blur Events Demo</title> <style> body { transition: background-color 0.5s ease; } /* Smooth transition for background color */ </style> <script> // Function to handle focus event function handleFocus() { document.getElementById('status').innerHTML = 'Window is focused'; document.body.style.backgroundColor = '#DFF0D8'; // Light green background } // Function to handle blur event function handleBlur() { document.getElementById('status').innerHTML = 'Window is not focused'; document.body.style.backgroundColor = '#F2DEDE'; // Light red background } </script> </head> <body onfocus="handleFocus()" onblur="handleBlur()"> <h1>Focus and Blur Events on Window</h1> <p>Status: <span id="status">Window is focused</span></p> <p><strong>Instructions:</strong> To test this functionality, click inside this window to focus, then click away to another window or tab to trigger the blur effect. Notice the background color change and status update.</p> </body> </html>