jQuery blur() Method

jQuery blur() method trigger the blue event. The jQuery blur event occurs when element loses focus. And when the blur event occurs, specified function will execute.

The blur() event can be generated by via keyboard tab button press, or mouse click anywhere on the page.

The blur() method is ofter used together with focus() method.

Syntax

This syntax represent to the blur event trigger

$(selector).blur();        // This syntax does not accept any arguments.

and this syntax represent to attach a function to the blur event

$(selector).blur(function);
Parameter Type Description
function Function Optional. Specifies the function to execute when the event is occurs.

Examples

This example represent the triggers the blur event for selected elements.

$(document).ready(function(){
  $(".btn1").click(function(){
    $("input").focus();
    $("input").css("background-color","yellow");
  });  
  $(".btn2").click(function(){
    $("input").blur();
    $("input").css("background-color","white");
  });
});

Run it...   »


This example represent to adds a function to the blur event.

$(document).ready(function(){
  $("input").focus(function(){
    $(this).css("background-color", "yellow");
  });  
  $("input").blur(function(){
    $(this).css("background-color", "white");
  });
});

Run it...   »