How to track active widgets 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.

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:

  • HTML
Console
Using request/dojo to make an AJAX request

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.

Free Resources

Attributions:
  1. undefined by undefined
Copyright ©2025 Educative, Inc. All rights reserved