Scaler
Academy
Data Science
Neovarsity
New
Skill Test
Free Masterclass
Search for Articles, Topics
JavaScript Onblur

JavaScript Onblur

By Aman
6 mins read
Last updated: 8 Sep 2022
161 views
Learn via video course
FREE
View all courses
JavaScript Course With Certification: Unlocking the Power of JavaScript
JavaScript Course With Certification: Unlocking the Power of JavaScript
by Mrinal Bhattacharya
85082
4.8
Start Learning
Start Learning View all courses
JavaScript Course With Certification: Unlocking the Power of JavaScript
JavaScript Course With Certification: Unlocking the Power of JavaScript
by Mrinal Bhattacharya
85082
4.8
Start Learning
Topics Covered

Overview

In JavaScript, onblur is a built-in event that is triggered when the user moves the cursor away from the element. This event is opposite to the onfocus event of JavaScript. Generally, the onblur event in JavaScript is used with form validation elements. Suppose we have a form in which the user needs to enter his/her full name. If the user's cursor is on that text field, then the textbox will be in focus mode, but if it is away from that text field, then the text field will be blurred. In this scenario, the onblur event can be used to perform validation.

Syntax of JavaScript onblur

The syntax of JavaScript onblur is as follows.

  • In HTML:
  • In JavaScript:
  • We can also use the addEventListener() method in JavaScript to use onblur event:

The addEventListener() method is only supported in and after chrome version 8.

Parameters of JavaScript onblur

onblur takes one parameter as an event that will occur when the element goes out of focus.

Exceptions of JavaScript onblur

  • The JavaScript onblur event may not work when the user is switching between the tabs due to security purposes. In this case, the property of this event will be set to "null".

Example

Given below is an example where we used the onblur event of JavaScript for a text field in an HTML page:

Output:

  • When the element is over the text field: JavaScript onblur exception example

  • When the element goes out of scope from the text field, onblur is executed, and the lowercase characters are converted into uppercase characters as shown below: JavaScript onblur exception example output

How does JavaScript onblur work?

As we know, the onblur event in JavaScript is the opposite of the "onfocus" event. The onblur event function activates as soon as the element where the function is added in the code goes out of focus. The text field again goes out of focus when the cursor leaves the determined text field.

Technical Details

There are some technical details that we need to know about onblur events in JavaScript are given below.

  • Bubbles: NO

Note: Bubbling is an event where the elements run from the innermost element to the outermost element

  • Cancelable: NO

Note: Cancelable is an event that returns a boolean value (true or false) for an event, whether it is cancelable or not.

  • Type of Event: Focus event

Note: Event type is described as the data structure that defines the data that is contained in the event.

  • DOM Version: level 2

Note: Dom(Document Object Model) is an API for HTML and XML documents that define the logical structure of the document.

  • Supported HTML tags:

:::

More Examples

Let us see more examples and understand "onblur event" in JavaScript in a better way. Example 1. Given below is an example of an onblur event in an HTML page

Output:

  • When the cursor is over the text field: JavaScript onblur exception example 1

  • When the cursor is removed from the text field, a popup appears showing "Focus lost". JavaScript onblur exception example 1 output

Example 2. Here we used the onblur event in JavaScript:

Output:

  • When the cursor is over the text field JavaScript onblur exception example 2

  • When the cursor is removed from the text field JavaScript onblur exception example 2 output

Example 3. Given below is an example of the addEventListener() method in JavaScript where the onblur event is used.

Output:

  • When the cursor is over the text field JavaScript onblur exception example 3

  • When the cursor is removed from the text field or focus is lost JavaScript onblur exception example 3 output

Example 4. onblur event in JavaScript can also be used for checking if a given input contains an integer or not. Given below is an example to check whether an input contains an integer or not.

Output:

  • By default: JavaScript onblur exception example 4

  • When the input contains an integer JavaScript onblur exception example 4 output

  • When the input does not contain an integer JavaScript onblur exception example final output

Browser Compatibility

The following table shows the browser compatibility of javascript onblur.

Browser NameSupported on versions
Internet Explorerversion >= 6(Aug 2001)
Mozila Firefoxversion >= 2(Oct 2006)
Microsoft Edgeversion >= 12(Jul 2015)
Google Chromeversion >= 4(Jan 2010)
Safariversion >= 3.1(Mar 2008)

Conclusion

  • The onblur event is a built-in function in JavaScript that is used to alert the user when the cursor is removed from an element where it is applied for.
  • onblur event activates when the focus is removed from the element.
  • This event is mainly for form validations.
  • This event can also be used with the addEventListener() method in JavaScript.
  • The onblur event is supported by almost all the most popular web browsers like Google Chrome, Internet Explorer, Safari, Edge, etc.