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



Onblur attribute in html

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 Code Explanation

  1. Onblur attribute calls the JavaScript function onBlur() and is used to define that the element in the text box loses its focus.
  2. The function onBlur() is used to transforms the textbox text to lower case.

Output for onblur attribute in HTML:

onblur Attribute Output part-1

  1. If we type the text “WIKITECHY” in uppercase in the text box.
onblur Attribute Output part-2 text turns into lowercase

  1. When the textbox loses its focus the text “wikitechy” turns into lowercase.

Browser Support for onblur attribute in HTML:

Yes Yes Yes Yes Yes

Related Searches to onblur Attribute in html