JavaScript blur()

The blur() method in JavaScript is used to remove the focus from a specified element. It is another way of deselecting an element by removing the highlighted border.

Syntax

The syntax for using the blur() method is as follows:

element.blur()

The element above represents the HTML element that will be affected by the method invocation.

Example

Consider the following HTML code snippet:

<input type="text" id="demo" />
<button onclick="blurFunction()">Blur</button>

<script>
function blurFunction() {
  document.getElementById("demo").blur();
}
</script>

In the above code, when the 'Blur' button is clicked, the blurFunction() function is executed. This function selects the input element with an id of demo and uses the blur() method to remove the focus from that element.

Output

When the 'Blur' button is clicked, the focus is removed from the input element.

Explanation

When you click on an HTML element, such as an input element, it becomes "focused". This is indicated by a highlighted border around the element. The blur() method is used to remove this highlight and deselect the element.

Use

The blur() method is useful when you want to deselect a selected element, or remove focus from it, without having to click on another element. You can use it in conjunction with other JavaScript events or functions to create dynamic and interactive user interfaces.

Important Points

• The blur() method is used to remove the focus from an HTML element.
• The element argument passed to the blur() method represents the HTML element to be affected.
• This method is used for removing the focus on any focused element and it is JavaScript native function.

Summary

In summary, the blur() method in JavaScript is used to remove the focus from a specified element. It is a useful method to deselect an element and remove focus without having to click on another element.