The blur() is an inbuilt method is jQuery that is used to remove focus from the selected element. This method start the blur event or it can be attached a function to run when a blur event occurs.
Syntax:
$(selector).blur(function)
Parameter: It accepts an optional parameter “function”.
Return Value: It does not return anything, it simply trigger the blur event on the selected element.
Code #1:
In the below code, no function is passed to the blur method.
< html > < head > 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:
Before entering any value to the “Enter Value” box-
After entering a value of “GeeksforGeeks” to the “Enter Value” box-
After clicking the “start blur event” button-
Code #2:
In the below code, function is passed to the blur method.
< html > < head > 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:
Before entering any value to the “Enter Value” box-
After entering a value of “GeeksforGeeks” to the “Enter Value” box-
After clicking the mouse button anywhere on the screen-