jQuery blur() Method
jQuery blur() is an inbuilt method that is used to remove focus from the selected element. This method starts the blur event or it can be attached a function to run when a blur event occurs.
Syntax:
$(selector).blur(function)
Parameters:
It accepts an optional parameter “function”.
jQuery examples to show the working of blur() function:
Example 1: In the below code, no function is passed to the blur method.
HTML
<!DOCTYPE html> < html > < head > < script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" > </ script > < script > $(document).ready(function () { $("#btn").click(function () { $("input").blur(); $("p").html( "This is blur method that is used!!!"); }); }); </ script > </ head > < body > <!--enter value and click on the button --> Enter Value: < input type = "text" > < br >< br > < button id = "btn" > start blur event!!! </ button > < p style = "color:green" ></ p > </ body > </ html > |
Output:
Example 2: In the below code, function is passed to the blur method.
HTML
<!DOCTYPE html> < html > < head > < script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" > </ script > < script > <!--jQuery code to show blur method--> $(document).ready(function () { $("input").blur(function () { $(this).css("background-color", "#ADFF2F"); }); }); </ script > </ head > < body > <!-- Enter a value to the field and click outside to see the change --> Enter Value: < input type = "text" name = "fullname" > </ body > </ html > |
Output: