JavaScript

What Does onfocus Event Do in JavaScript

The “onfocus” event is a well-reputed event mostly used while working with the forms in JavaScript. It triggers when its associated HTML element gets focused. It works on all types of HTML elements except the “<html>”, “<title>”, “<base>”, “<style>”, “<head>”, “<body>”, “<script>”, “<iframe>”, “<meta>”, “<br>”, “<bdo>”, and “<param>” elements. This event i.e., “onfocus” is generally used in the HTML input field for the validation of all types of forms.

This post explains the objective, working, and usage of the “onfocus” event in JavaScript.

How Does “onfocus Event” Work in JavaScript?

The “onfocus” event is triggered when the particular HTML element gets focused. Moreover, It invokes the execution of the associated JavaScript function.

Syntax

element.onfocus = function(){myScript};

In the above syntax:

  • element: It represents the HTML element.
  • function(): It refers to the function that needs to be invoked upon the event trigger.
  • myScript: It corresponds to the function definition to perform the specific task when the “onfocus” event occurs.

How to Use an “onfocus Event” in JavaScript?

The “onfocus” event can be utilized in different ways in JavaScript. This section carries out various tactical examples to illustrate its usage.

Example 1: Triggering theonfocus Event by Changing the Input Field Background Color

This example triggers the “onfocus” event by changing the input text field background color with the help of a user-defined JavaScript function.

HTML Code

Firstly, overview of the following HTML code:

<h2> onfocus Event In JavaScript</h2>

<p> Click inside the input field to get focus(onfocus).</p>

Name: <input type="text" id="demo" placeholder="Enter your name" onfocus="func()">

In the above code:

  • The “<h2>” tag defines the subheading and the “<p>” tag creates a paragraph, respectively.
  • After that, the “<input>” tag representing the input text field is labeled “Name”, content-type as “text”, associated id as “demo”, and the stated placeholder.
  • Also, the “onfocus” event is specified to redirect to the function named “func()”.

JavaScript Code

Next, go through the below-provided JavaScript code:

<script>

function func() {

document.getElementById("demo").style.background = "pink";

}

</script>

In the above lines of code:

  • A function named “func()” is defined.
  • In the function definition, the “document.getElementById()” method fetches the paragraph via its id and applies the “style.background” property.
  • It is such that the background color of the input text field changes upon the event i.e., “onfocus” trigger.

Output

The output confirms that when the “onfocus” event triggers, the background color of the given input field changes accordingly.

Example 2: Triggering the onfocus EventVia Alert Box

In this example, an alert box can be displayed upon the event i.e., “onfocus” trigger via a user-defined function.

HTML Code

First, have a look at the following HTML code:

<h2> onfocus Event In JavaScript</h2>

<p> Click inside from the input field to get focus(onfocus).</p>

Name: <input type="text" id="pass1" placeholder="Enter your name">

In the above HTML code block:

  • Likewise, add a subheading of level 2 via the “<h2>” tag and include a paragraph using the “<p>” tag.
  • Similarly, an input field is defined via the stated label, content type, id, and placeholder, respectively.

JavaScript Code

Now, consider the following JavaScript code:

<script>

document.getElementById("pass1").onfocus = function() {demo()};

function demo() {

alert("Input field get focused.");

}

</script>

In the above code snippet:

  • The “document.getElementById()” method fetches the input field via its id and associates the event i.e., “onfocus” with it.
  • It is such that the JavaScript function “demo()” becomes invoked upon the event trigger and displays the “alert” box with the stated message.

Output

In this output, it can be observed that when the mouse clicks inside the input field, the element gets focused and so the “alert” box pops up displaying the stated message.

Conclusion

JavaScript offers the “onfocus” event that is triggered when the associated HTML element moves inside of it i.e., gets focus. It is the inverse of the “onblur” event that triggers when the element loses focus. It can be used to invoke the JavaScript function for performing the desired task upon being triggered. This guide demonstrated the purpose, working, and usage of the “onfocus” event in JavaScript.

About the author

Talha Saif Malik

Talha is a contributor at Linux Hint with a vision to bring value and do useful things for the world. He loves to read, write and speak about Linux, Data, Computers and Technology.