HTML onblur Event Attribute - Form Events Attribute

The HTML onblur event attribute specifies a script to be executed when an element loses focus. This event is triggered when a user moves away from an element that currently has focus, such as clicking outside of a text input field or navigating to another element using the Tab key .

Example of HTML onblur Event Attribute

Here validates an input field when the user leaves it.

index.html

Example: HTML

 <input type="text" name="fname" id="fname" onblur="myFunction()">

Output should be:

Definition and Usage of HTML onblur Event Attribute

The onblur attribute fires the moment that the element loses focus.

Onblur is most often used with form validation code (e.g. when the user leaves a form field).

Tip: The onblur attribute is the opposite of the onfocus attribute.

Browser Support of HTML onblur Event Attribute

Syntax of HTML onblur Event Attribute

<element onblur="script">

Attribute Values of HTML onblur Event Attribute

Value	Description
script	The script to be run on onblur

Technical Details of HTML onblur Event Attribute

Supported HTML tags:	All HTML elements, EXCEPT: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title>

How to validate an input field when the user leaves it

When you leave the input field, a function is triggered which transforms the input text to upper case.

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

Enter your name: <input type="text" name="fname" id="fname" onblur="myFunction()">

<p>When you leave the input field, a function is triggered which transforms the input text to upper case.</p>

<script>
function myFunction() {
  let x = document.getElementById("fname");
  x.value = x.value.toUpperCase();
}
</script>

</body>
</html>

Output should be:

How to use "onblur" together with the "onfocus" attribute

When you enter the input field, a function is triggered which sets the background color to yellow. When you leave the input field, a function is triggered which sets the background color to red.

index.html

Example: HTML

 <input type="text" onfocus="focusFunction()" onblur="blurFunction()">

Output should be:

html event attributes

List of Form Events Attribute	Form Events Attribute
HTML onblur Event Attribute	Form Events Attribute
HTML onchange Event Attribute	Form Events Attribute
HTML oncontextmenu Event Attribute	Form Events Attribute
HTML onfocus Event Attribute	Form Events Attribute
HTML oninput Event Attribute	Form Events Attribute
HTML oninvalid Event Attribute	Form Events Attribute
HTML onreset Event Attribute	Form Events Attribute
HTML onsearch Event Attribute	Form Events Attribute
HTML onselect Event Attribute	Form Events Attribute
HTML onsubmit Event Attribute	Form Events Attribute

Single Articles

Example of HTML onblur Event Attribute	Form Events Attribute
Definition and Usage of HTML onblur Event Attribute	Form Events Attribute
Browser Support of HTML onblur Event Attribute	Form Events Attribute
Syntax of HTML onblur Event Attribute	Form Events Attribute
Attribute Values of HTML onblur Event Attribute	Form Events Attribute
Technical Details of HTML onblur Event Attribute	Form Events Attribute
How to validate an input field when the user leaves it	Form Events Attribute
How to use "onblur" together with the "onfocus" attribute	Form Events Attribute

Type:	Develop
Category:	Web Tutorial
Sub Category:	Form Events Attribute
Uploaded by:	Admin

Reffered: https://www.w3schools.com/tags/ev_onblur.asp