HTML onblur Attribute

Last Updated : 29 Aug, 2024

This attribute fires at that moment when the element loses focus. This attribute is mostly used in the Form validation code. This attribute is the opposite of onfocus attribute.
Supported Tags: It supports all HTML elements except these elements which are given below :

<base>
<bdo>
<br>
<head>
<html>
<iframe>
<meta>
<param>
<script>
<style>
<title>

Syntax:

<element onblur = "script">

Attribute Value: This attribute is used to any HTML elements. The script run when onblur attribute called.

Example: In this example we use the onblur attribute to call a JavaScript function that converts the input text to uppercase when the user leaves the input field.

html

<!DOCTYPE html>
<html>

<head>
    <title>onblur attribute</title>
    <style>
        body {
            text-align: center;
        }

        h1 {
            color: green;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h2>onblur attribute</h2>

    <!-- When leave the input box then the input box 
        value is converted into capital letter. -->
    Username: <input type="text" 
                     name="fname" 
                     id="GFG" 
                     onblur="Geeks()">
    <script>
        function Geeks() {
            let y = document.getElementById("GFG");
            y.value = y.value.toUpperCase();
        }
    </script>
</body>

</html>

Output:

Supported Browsers: The browser supported by onblur attribute are listed below:

HTML onchange Event Attribute

manaschhabra2

Improve

Article Tags :

HTML onblur Attribute

Similar Reads

Window Event

Form Event

Keyboard Event

Mouse Event

Drag Event

Clipboard Events

Misc Events

Thank You!

What kind of Experience do you want to share?