In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > event handling > methods > blur

blur method

Browser support:

Removes the focus from the current element, and fires the onblur event.

The blur method has no effect on an element that is not the active element in the document. If you use the blur method for the active element, then it loses the active state (and of course the focus, too), and fires the onblur event. Note: the onbeforedeactivate, ondeactivate, onfocusout and DOMFocusOut events are also fired. In that case, the body element becomes the active element.

You do not need to call the blur method on the active element before you set the focus to another element, only use the focus or setActive method on that element.

The blur method behaves differently on the window object in different browsers. If the browser window is the foreground window and the window.blur method is called:

in Internet Explorer, the operating system activates another application window
in Firefox, Google Chrome and Safari, the browser window only loses the active state when another Firefox, Google Chrome or Safari application can be activated
in Opera, the blur method has no effect for windows.

If you need the active element in the document, use the activeElement property. If you need to simulate other events, see the pages for the dispatchEvent and fireEvent methods.

Syntax:

object.blur ( );

You can find the related objects in the Supported by objects section below.

Return value:

This method has no return value.

Example HTML code 1:

This example illustrates the use of the blur method.

<head>
    <script type="text/javascript">
        function SetFocus () {
            var input = document.getElementById ("myInput");
            input.focus ();
        }

        function RemoveFocus () {
            var input = document.getElementById ("myInput");
            input.blur ();
        }
    </script>
</head>
<body>
    <input id="myInput" value="An input field"/>
    <br /><br />
    Move the mouse over the following lines and watch the input field.
    <br /><br />
    <div onmousemove="SetFocus ();">Set the focus to the input field</div>
    <div onmousemove="RemoveFocus ();">Remove the focus from the input field</div>
</body>