Skip to content

Instantly share code, notes, and snippets.

@RunnerRick

RunnerRick/._window-focus-blur-with-jquery.md

Last active March 20, 2021 04:15
Show Gist options
  • Save RunnerRick/7645236 to your computer and use it in GitHub Desktop.
Save RunnerRick/7645236 to your computer and use it in GitHub Desktop.
Download ZIP
Demonstrates how to handle the window's `focus` and `blur` events with jQuery.
Raw
._window-focus-blur-with-jquery.md

Demonstrates how to handle the window's focus and blur events with jQuery.

Raw
.jshintrc
{
"predef": [
"$"
]
}
Raw
app.js
'use strict';
// Handle jQuery's `document ready` event.
$(document).ready(function () {
// Define an event handler for the window's `focus` event.
$(window).on('focus', function () {
// Append this text to the `body` element.
$('body').append('The window has focus.<br>');
});
// Define an event handler for the window's `blur` event.
$(window).on('blur', function () {
// Append this text to the `body` element.
$('body').append('The window has lost focus.<br>');
});
});
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Window Focus Example</title>
</head>
<body>
<p>Click anywhere in the browser's viewport to trigger the <code>focus</code> event.</p>
<p>Click on something other than the browser's viewport to trigger the <code>blur</code> event.</p>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="app.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment