html tutorial - onblur Attribute in HTML - html5 - html code - html form

Learn html - html tutorial - Onblur attribute in html - html examples - html programs
- The onblur attribute is used to trigger an event when the element loses its focus.
- Onblur attribute is mostly used for the form validation code.
- The onblur attribute is a part of an Event Attributes.
Syntax for onblur attribute in HTML:
<element onblur="script">
Applies to:
Elements | Attribute |
---|---|
All HTML Elements | onblur |
Attributes Values of onblur attribute in HTML:
Value | Description |
---|---|
Script | The script can run on onblur |
Sample coding for onblur attribute in HTML:
Tryit<!DOCTYPE html>
<html>
<head>
<title>Wikitechy HTML onblur attribute</title>
</head>
<body>
Enter the text:
<input type="text" id="txtname" onblur="Onblur()">
<script>
function Onblur() {
var a = document.getElementById("txtname");
a.value = a.value.toLowerCase();
</script>
</body>
</html>
Code Explanation for onblur attribute in HTML:

- Onblur attribute calls the JavaScript function onBlur() and is used to define that the element in the text box loses its focus.
- The function onBlur() is used to transforms the textbox text to lower case.
Output for onblur attribute in HTML:

- If we type the text “WIKITECHY” in uppercase in the text box.

- When the textbox loses its focus the text “wikitechy” turns into lowercase.
Browser Support for onblur attribute in HTML:
![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|
Yes | Yes | Yes | Yes | Yes |