How to focus/unfocus elements with dijit/focus

What is Dojo?

The Dojo is a JavaScript toolkit(library) that provides many utility modules and functions to create a web application. We can save time and speed up the development process using the predefined Dojo modules. Dojo includes language utilities, UI components, and more.

Note: Read more about Dojo at their homepage.

The dijit/focus module

Dijit is Dojo’s UI Library. The dijit/focus is a module present in the Dojo library to work with focused nodes and widgets. Using this module, we can get the focused node/widget and track the focus changes.

How to use the dijit/focus module

1. Load the dijit/focus module using the require function.

2. Call the focus method to focus on an element.

3. Call the blur method to unfocus on an element.

Code example

Let's make a sample example to focus and unfocus a div element using dijit/focus module:

Code explanation

In the above code snippet:

• Line 10: We create a div elements and add width, height, and background color for the div element. Add style to add a border when the div element is focused. The border will be removed when the element is unfocused.

• Lines 11 and 12: We create two buttons to focus and unfocus the div element. Add the click event listener to those buttons.

• Line 14: We load the Dojo library from the CDN server.

• Lines 29–33: We create a function loadDijitFocus. This function will use the require function to load the dijit/focus module. Once that module is loaded, we assign the focused object to a variable DijitFocus. So that we can use that to focus and unfocus elements.

• Lines 36–38: We create a function to focus the element. Here we use focus method of the DijitFocus object.

• Lines 41 - 46: We create a function to unfocus the element. Here, we use curNode property of the DijitFocus object to get the currently focused element. After that, we use blur method to unfocus the element.