JavaScript blur(): Losing Focus

The blur() method removes focus from a focused HTML element. For modern interfaces, element.blur() is the useful form. The older window.blur() method is a legacy API and should not be used to control a user’s browser window.

const input = document.getElementById('blur_example');
input.blur();

Element blur() Top ↑

When a form control has focus, calling its blur() method removes that focus. Usually another user action determines where focus goes next, so do not use blur() merely to hide a focus outline.

Listening for Focus and Blur Events Top ↑

const field = document.querySelector('#name');
field.addEventListener('focus', () => console.log('Focused'));
field.addEventListener('blur', () => console.log('Focus left'));

These events are useful for validation hints and interface feedback. Avoid using blur to punish or trap users as they move through a form.

Legacy window.blur() Top ↑

Older scripts attempted to push a browser window into the background with:

window.blur(); // legacy; do not rely on this

Modern browsers do not allow normal scripts to control users’ window focus in that way. Keep this only when reading historical code. If your goal is to detect focus changes, listen for the window focus/blur events or use document.hasFocus().

Original Popup Focus Demo Top ↑

Open the focus/blur/hasFocus() demo →

The child-window example used by this demo is also discussed in moveBy(). Continue to window.focus(), the Window object, bookmark example or redirect example.

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: