Javascript Reference - HTML DOM blur() Method

The blur() method removes focus from an element.

Browser Support


`blur`	Yes	Yes	Yes	Yes	Yes

Syntax

HTMLElementObject.blur()

Parameters

None.

Return Value

No return value.

Example

The following code shows how to remove focus from an <a> element.


<!DOCTYPE html>
<html>
<head>
<style>
a:focus, a:active {<!--from   w  w w .ja v a 2s .c o  m-->
    color: green;
}
</style>
</head>
<body>
<a id="myAnchor" href="http://www.example.com">Visit example.com</a>
<input type="button" onclick="getfocus()" value="Get focus">
<input type="button" onclick="losefocus()" value="Lose focus">
<script>
function getfocus() {
    document.getElementById("myAnchor").focus();
}
function losefocus() {
    document.getElementById("myAnchor").blur();
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to remove focus from a text field.


<!DOCTYPE html>
<html>
<body>
<!--   w  w w. ja  va2s. c  o  m-->
<input type="text" id="myText" value="A text field">
<button type="button" onclick="getFocus()">Get focus</button>
<button type="button" onclick="loseFocus()">Lose focus</button>

<script>
function getFocus() {
    document.getElementById("myText").focus();
}

function loseFocus() {
    document.getElementById("myText").blur();
}
</script>

</body>
</html>

The code above is rendered as follows: