JavaScript

JavaScript Focus and Blur Events

HTML DOM includes various JavaScript Events like clicking a button, pressing a key, maximizing a window, etc are all considered as an event. Events are interactions between HTML and JavaScript that happen when a web page is manipulated by either the user or the browser.

There are numerous categories of JavaScript events but in this article, we will emphasize the usage of JavaScript focus and blur events.

JavaScript Focus and Blur Events

When HTML elements gain focus or lose focus, the JavaScript focus or blur events happen which are a part of the FocusEvent Object.

The events that are classified in the category of JavaScript focus and blur events are demonstrated below:

  1. onblur Event
  2. onfocus Event
  3. onfocusin Event
  4. onfocusout Event

Each of the above mentioned events are discussed below.

1. onblur Event

The onblur event happens when the focus of an object is lost. It is mostly used within the validation code of a form. It does not bubble and cannot be canceled. It supports all HTML tags other than <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title> and is included in DOM level 2.

Syntax

Syntax of onblur event is as follows.

HTML Syntax

<element onblur="functionName()">

JavaScript Syntax

object.onblur = function(){script};

JavaScript addEventListener() Syntax

object.addEventListener("blur", script);

Example

<!DOCTYPE html>

<html>

<body>

Enter your name: <input type="text" id="fname" onblur="myFunc()">

<p>The function will change lower case letters to upper case letters.</p>

<script>

function myFunc() {

var x = document.getElementById("fname");

x.value = x.value.toUpperCase();

}

</script>

</body>

</html>

Output

When you leave the input field, the onblur event occurs and the lower-case letters are shifted to upper-case letter.

2. onfocus Event

The onfocus event happens when an elements is focused. It is mostly used with <input>, <select>, and <a>. It does not bubble and cannot be canceled. It supports all HTML tags other than <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title> and is included in DOM level 2.

Syntax

Syntax of onfocus event is as follows.

HTML Syntax

<element onfocus="functionName">

JavaScript Syntax

object.onfocus = function(){script};

JavaScript addEventListener() Syntax

object.addEventListener("focus", script);

Example

<!DOCTYPE html>

<html>

<body>

Enter your name: <input type="text" onfocus="abFunction(this)">

<p>A function changes the background color of the input field when it is focused.</p>

<script>

function abFunction(focus) {

focus.style.background = "pink";

}

</script>

</body>

</html>

Output

When you click on the input field, the background color of input field will be changed to blue. We have shown the before and after state of the input field below.

Before

After

3. onfocusin Event

The onnfocusin event is same like onfocus event and happens when an element just gets the focus however a subtle difference between these two is that this (onfocusin) event bubbles and it cannot be canceled. It supports all HTML tags other than <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title> and is included in DOM level 2.

Syntax

Syntax of onfocusin event is as follows.

HTML Syntax

<element onfocusin="functionName()">

JavaScript Syntax

object.onfocusin = function(){script};

JavaScript addEventListener() Syntax

object.addEventListener("focusin", script);

Example

<!DOCTYPE html>

<html>

<body>

Name: <input type="text" id="fname" onfocusin="abFunction()">

<p>Click on the input field</p>

<script>

function abFunction() {

document.getElementById("fname").style.backgroundColor = "pink";

}

</script>

</body>

</html>

Output

Before clicking the input field.

After clicking the input field, the background color of the input field will be changed to pink.

4. onfocusout Event

The onnfocusout event is same like onblur event and happens when an element just loses the focus however a subtle difference between these two is that this (onfocusout) bubbles and it cannot be canceled. It supports all HTML tags other than <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title> and is included in DOM level 2.

Syntax

Syntax of onfocusout event is as follows.

HTML Syntax

<element onfocusout="functionName()">

JavaScript Syntax

object.onfocusout = function(){script};

JavaScript addEventListener() Syntax

object.addEventListener("focusout", script);

Example

<!DOCTYPE html>

<html>

<body>

Enter your name: <input type="text" id="fname" onfocusout="abFunction()">

<p>Leave the input field to shift the lower-case letters to upper-case.</p>

<script>

function abFunction() {

var out = document.getElementById("fname");

out.value = out.value.toUpperCase();

}

</script>

</body>

</html>

Output

When you leave the input field the lower case letters will be shifted to upper case letters.

Conclusion

Events that occur when an element gains or loses its focus are referred to as JavaScript focus and blur events. Events that are classified into the category of JavaScript focus and blur events are onblur event, onfouc event, onfocusin event, and onfocusout event. All these events are discussed in detail along with appropriate example.

About the author

Naima Aftab

I am a software engineering professional with a profound interest in writing. I am pursuing technical writing as my full-time career and sharing my knowledge through my words.