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.
dijit/focus
moduleDijit 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:
Load the dijit/focus
module using the require
function.
Use watch
method to track change on activeStack
array, which contains the set of widgets that is focused.
Listen for widget-focus
and widget-blur
to detect the widget focus and unfocus state.
Let's make a sample example to focus and unfocus a dialog
widget using dijit/focus
module:
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