jQuery Blur Event

Thursday, June 14, 2012

The jQuery event blur() method triggers when an element loses focus. The blur() method triggers the blur event, or it can specify a function to run when a blur event occurs. Originally, this event was only applicable to form elements, such as <input>. In modern browsers, the domain of the event has been extended to include all element types. An element can lose focus via keyboard commands or by mouse clicks elsewhere on the page.



functionOptional. Function to run when the event occurs


$("input").blur(function () {
    $("input").css("background-color", "#666666");

In the jQuery code listed above, the blur() method specifies that a function should run when the blur event occurs. In the example below, the input element's background-color property will be changed when it loses focus. Click on the input element, type in some text, and click the TAB key or use your mouse to click somewhere else on the page.

First Name

Did you find the page informational and useful? Share it using one of your favorite social sites.

Recommended Books & Training Resources

HTML CSS and JavaScript Editor JavaScript and jQuery: The Missing Manual Pro jQuery