JQuery Blur() Method

JQuery Blur() Method triggers the blur event for HTML Element or attaches a user defined function with blur event for an element.

Table of Contents

Syntax of JQuery Blur() Method

The Syntax of JQuery Blur() Method is shown below.

This will blur the selected element or in other words removes the focus from it.


$(selector).blur()

This will execute the lines of code defined inside function body whenever selected element loses the focus.


$(selector).blur(function()
{
function body
});

Usage of JQuery Blur() Method

JQuery Blur() Method works in two ways, The blur method can remove the focus from selected HTML element.

Secondly it can also attach the user defined function with the blur event, in this way it will wait for the blur event to occur and will execute the function once it occurs.

Example of JQuery Blur() Method

Simple example of JQuery Blur() Method is shown below.


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery blur() Method</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <input type="text">
<script>
$(document).ready(function(){
  $("input").blur(function(){
    alert("This blur event has occurred.");
  });
});
</script>
</body>
</html>

The above example will display the alert box as soon as the focus is removed from input element.


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery blur() Method</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <input type="text">
  <button>Remove Focus</button>
<script>
$("button").click(function(){
  $("input").blur()
});
</script>
</body>
</html>

In above example the focus will be removed form input element as soon as the button is clicked.