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:
