HTML - attributes - onblur

revision:


Content

"onblur" attribute : when element loses focus syntax some examples


"onblur" attribute : when element loses focus

top

This attribute fires the moment an element loses focus. "Onblur" is most often used with form validation code (e.g. when the user leaves a form field).
The "onblur attribute" is the opposite of the "onfocus attribute".

The onblur attribute is part of the event attributes, and can be used on any HTML element.


syntax

top

<element onblur="script"></element>

script: the script to be run on onblur.


some examples

top

Enter your name:

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

codes
                    <p class="spec">Enter your name: <input type="text" name="fname" id="fname" onblur="changeFocus()"></p>
                    <p class="spec">When you leave the input field, a function is triggered which
                    transforms the input text to upper case.</p>
                    <script>
                        function changeFocus() {
                        var x = document.getElementById("fname");
                        x.value = x.value.toUpperCase();
                        }
                    </script>
                
Name :






codes
                    <form style="margin-left:3vw;" name="onblur_example" action=""> 
                        Name : <input type="text" name="name" onblur="alert('name field has lost focus')"><br><br>
                        <label>Favorite sports </label> 
                        <select name="favourite_sports" onblur="alert('favourite_sports has lost focus')">
                        <option value="Soccer">Soccer</option>
                        <option value="Hockey">Hockey</option>
                        <option value="Tennis">Tennis</option> 
                        <option value="Golf">Golf</option> 
                        </select><br><br>
                        <label>Describe yourself in short : </label><br><textarea cols="20" rows="10" name="describe_ yourself"
                        onblur="alert('describe_ yourself has lost focus')"></textarea><br><br>
                        <button type="button" name="submit">Submit</button>
                    </form>