JavaScript Window blur() Method

What You’ll Learn

The window.blur() method removes focus from the browser window. This tutorial covers syntax, how it differs from element.blur(), listening for the window blur event, five examples, and when the method is actually useful.

Introduction

Every browser tab has a focused state: when your tab is active, the window has focus. When you switch to another tab or application, the window loses focus and a blur event fires. The window.blur() method lets JavaScript request that same “unfocused” state programmatically.

Beginners often confuse window.blur() with blurring a form field. Form controls use HTMLElement.blur() instead. This page covers the window method only—the API on the global browser window object.

Understanding the blur() Method

window.blur() takes no arguments and returns undefined. It asks the browser to move focus away from the current window. In practice, the visual effect is often minimal because browsers limit scripts from aggressively controlling focus for security and usability reasons.

The more common pattern in modern apps is listening for the blur event to detect when the user leaves your tab—useful for pausing video, autosaving drafts, or stopping timers.

📝 Syntax

General form of Window.blur():

window.blur();
// shorthand (same in browsers):
blur();

Parameters

• None.

Return value

• undefined.

Related APIs

• window.focus() — try to focus the window (often restricted without user gesture).
• window.addEventListener("blur", fn) — run code when the tab loses focus.
• element.blur() — remove focus from a specific HTML element.

Examples Gallery

Open DevTools Console (F12) or use the Try-it links. Some effects depend on browser focus rules—the event listener examples are the most reliable way to observe blur behavior.

document.getElementById("blurBtn").addEventListener("click", function () {
  window.blur();
  console.log("window.blur() called");
});

window.blur() called

window.addEventListener("blur", function () {
  console.log("Tab lost focus — pause video or autosave here");
});

window.addEventListener("focus", function () {
  console.log("Tab is active again");
});

Tab lost focus — pause video or autosave here
(when you return)
Tab is active again

document.getElementById("focusBtn").onclick = function () {
  window.focus();
  console.log("window.focus() called");
};

document.getElementById("blurBtn").onclick = function () {
  window.blur();
  console.log("window.blur() called");
};

window.focus() called
window.blur() called

console.log("Window will call blur() in 2 seconds…");

setTimeout(function () {
  window.blur();
  console.log("window.blur() called after delay");
}, 2000);

Window will call blur() in 2 seconds…
(2 seconds later)
window.blur() called after delay

<input id="name" type="text" value="Focus is here">
<button type="button" id="blurInput">Blur input</button>

<script>
  document.getElementById("blurInput").onclick = function () {
    document.getElementById("name").blur();
    console.log("Input blurred — window may still be focused");
  };
</script>

Input blurred — window may still be focused

🚀 Common Use Cases

• Tab visibility — listen for blur to pause media or stop animations when the user leaves.
• Autosave drafts — save form state when the window loses focus.
• Pop-up windows — child windows may call blur() or focus() on the opener in legacy flows.
• Analytics — track when users switch tabs during long forms or checkout.
• Idle detection — combine blur/focus timestamps with inactivity timers.
• Learning demos — compare window methods with element focus APIs.

📝 Notes

• window.blur() is not the same as the CSS filter: blur() visual effect.
• The HTML onblur attribute on inputs listens for element blur, not window blur.
• document.hasFocus() returns whether the document currently has focus.
• Page Visibility API (document.visibilityState) complements blur events for tab detection.
• Avoid surprising users by blurring the window without context—it can feel like the page broke.
• In iframes, focus/blur behavior involves the embedded document’s window object.

💡 Best Practices