Javascript- Onblur Event Handler

The Onblur Event Handler in Javascript is an event handler that occurs when an item comes out of focus on a web page.

For example, if you click on a text field and then click on something else in the page, the text field was on focus when you clicked it, but came out of focus when you clicked something else on the page. The moment you click something else is when the Javascript onblur event handler would be triggered and do whatever the programmer programs it to do.

As an example, take the text box below:

Enter Your Name:

Enter any alphabetical characters into this text box and then click on another element on the page. Once you click away from the text box, the alphabetical characters will now all be converted into uppercase. The text box was given an onblur event handler which converted all characters entered to uppercase using the toUpperCase() function.

To use the onblur event handler, you simply place it in the element which you want it implemented for.

HTML Code

The HTML code to create the above text box is:

Enter Your Name: <input type="text" onblur="capitalize()" id="textbox"/>

Notice how this text box has an id called textbox and has an oblur event handler which calls the capitalize() function. It is this capitalize() function which converts the alphabetical characters that the user enters into uppercase when the user clicks away from the text box.

Javascript Code

Now we will show the code for the capitalize() function which once again capitalizes the characters entered in lowercase.

The Javascript code is:

<script>
function capitalize()
{
var x=document.getElementById("textbox");
x.value= x.value.toUpperCase();
}
</script>

We create the variable x and assign to it the value of the characters entered into the text box. The following line then takes this value and applies the function toUpperCase() to it. This capitalizes, or makes uppercase, all characters entered.

And this is how the onblur javascript event handler works.

Second Example

This is yet another example of the onblur event handler.

This time when clicked away from, the background of the text box will turn blue.

Enter Your Email:

Click on the text box above and then click away from it. You will notice that it turns blue when clicked away from.

HTML Code

The HTML code to create the above text box is:

Enter Your Email: <input type="text" id="textbox2" onblur="turnblue(this)"/>

Javascript Code

The Javascript code to change the textbox to blue when clicked away from is:

<script>
function turnblue(x)
{
x.style.background="blue";
}
</script>

This function turnblue() is called when the text box is clicked away from. This function will change the background of the text box to a blue color when clicked away from.

Third Example

Combining Onblur and Onfocus Functions For an Item

Even though the following may be an okay example, it isn't as practical as the one shown below.

The text box below functions as a real-world form. When a user focuses on a text box, that text box will highlight to a yellow color. When the user then focuses off of that element, the text box will then change back to a white background. This is how many real-world web forms work, so that only the current text box is highlighted and the rest aren't, to show where the user is currently clicked.

To do this, each text box needs an onfocus and an onblur event handler. The onfocus event handler triggers when the text box is currently clicked on. And the onblur event handler triggers when the text box is clicked away from. In this way, the onblur and onfocus event handlers work together as a reciprocals.

Enter your name:
Enter your email:
Enter your phone number:

The code to do this is:

<script>
function highlightyellow(x)
{
x.style.background="yellow";
}

function regular(x)
{
x.style.background="white";
}
</script>

Enter your name: <input type="text" Onfocus="highlightyellow(this)" onblur="regular(this)">
Enter your email: <input type="text" Onfocus="highlightyellow(this)" onblur="regular(this)">
Enter your phone number: <input type="text" Onfocus="highlightyellow(this)" onblur="regular(this)">

Related Resources

HTML Comment Box is loading comments...

Learning about Electronics

Javascript- Onblur Event Handler

HTML Code

Javascript Code

Second Example

HTML Code

Javascript Code

Third Example

Combining Onblur and Onfocus Functions For an Item