How to track active widgets with dijit/focus

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.

The dijit/focusmodule

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

We can use the dijit/focus module to track active widgets by following the below steps:

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

2. Use watch method to track change on activeStack array, which contains the set of widgets that is focused.

3. Listen for widget-focus and widget-blur to detect the widget focus and unfocus state.

Code example

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

Code explanation

In the above code snippet:

• Line 4: We load the CSS file required for the Dijit widgets.

• Line 8: We create a input element with id number_input .

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

• Lines 13–18: We load the NumberTextBox module present in dijit/form . This is used to create a number field input box that only allows numeric values as input. We made the created input element into a number text box.

• Line 20: We load the dijit/focus module. Once that module is loaded, we assign the focused object to a variable DijitFocus.

• Lines 24–26: We add the event listener for widget-focus event. This event is fired when a widget is focused.

• Lines 29–31: We add the event listener for widget-blur event. This event is fired when a widget goes out of focus.

• Lines 34–37: We use the watch function to track changes on the activeStack array that contains the ids of the focused widget elements.