The onblur attribute in HTML is an event attribute that triggers a script when an element loses focus.
Definition and Usage
➔ This event is typically used to perform actions such as validation or formatting with input elements.
➔ It can also be used for other purposes such as changing the properties of an element or changing the style of an element, whenever the element loses focus due to the user moving to the next field.
➔ The onblur attribute is the opposite of the onfocus attribute, which is activated when an element gains focus.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML onblur attribute example</title>
<meta charset="utf-8" />
</head>
<body>
<h3>Example: HTML onblur attribute example</h3>
<div>
<input type="text" id="name" onblur="validatename()">
<script>
function validatename() {
const nameInput = document.querySelector('#name');
if (nameInput.value.length < 6) {
alert('Username must be at least 6 characters long.');
}
}
</script>
</div>
</body>
</html>
Applies to
This attribute can be used on the following element.
| Attribute | Element |
|---|---|
| onblur | All visible elements |
Example
<!DOCTYPE html>
<html>
<head>
<title>addEventListener/removeEventListener Example</title>
<style>
input[type="button"] {
width: 150px;
height: 50px;
background-color: #3d4d5d;
font-size: 14pt;
color: white;
border-radius: 5px;
margin-left: 140px;
}
input[type="button"]:hover {
background-color: #1d2d3d;
color: white;
}
input[type="text"] {
width: 230px;
height: 30px;
background-color: #fff;
font-size: 14pt;
color: #000;
margin: 5px;
margin-left: 140px;
text-align: center;
}
input[type="text"]:hover {
background-color: #cfdfef;
color: #000;
}
</style>
</head>
<body>
<input type="button" value="Add Listener" id="myButton1">
<input type="button" value="Remove Listener" id="myButton2"><br><br>
<input type="text" name="name" id="name" placeholder="click to see action">
<script>
const myButton1 = document.getElementById('myButton1');
const myButton2 = document.getElementById('myButton2');
const name = document.querySelector('#name');
let myListener = (event) => {
alert("Textfield click event working");
};
myButton1.addEventListener('click', (event) => {
alert("click event added to textfield");
name.addEventListener('click', myListener);
});
myButton2.addEventListener('click', (event) => {
alert("click event removed from textfield");
name.removeEventListener('click', myListener);
});
</script>
</body>
</html>
Click on the "copy" button and try this example in your project.
Example
<!DOCTYPE html>
<html>
<head>
<title>addEventListener/removeEventListener Example</title>
<style>
input[type="button"] {
width: 150px;
height: 50px;
background-color: #3d4d5d;
font-size: 14pt;
color: white;
border-radius: 5px;
margin-left: 140px;
}
input[type="button"]:hover {
background-color: #1d2d3d;
color: white;
}
input[type="text"] {
width: 230px;
height: 30px;
background-color: #fff;
font-size: 14pt;
color: #000;
margin: 5px;
margin-left: 140px;
text-align: center;
}
input[type="text"]:hover {
background-color: #cfdfef;
color: #000;
}
</style>
</head>
<body>
<input type="button" value="Add Listener" id="myButton1"><br><br>
<input type="text" name="name" id="name" placeholder="click to see action">
<script>
const myButton1 = document.getElementById('myButton1');
const name = document.querySelector('#name');
let myListener = (event) => {
alert("Textfield click event working");
};
myButton1.addEventListener('click', (event) => {
alert("click event added to textfield, after 6 seconds will be removed.");
name.addEventListener('click', myListener);
});
setTimeout(() => {
alert("click event has been removed from textfield");
name.removeEventListener('click', myListener);
}, 6000);
</script>
</body>
</html>
Click on the "copy" button and try this example in your project.