Best place for onFocus and onBlur events?

[dorilama]

Hopefully the weweb team will expose a trigger for focus events one day.

For now a simple workaround can be using javascript actions and event listeners:

• create a variable of type boolean addedListeners. This will be used to avoid adding event listeners multiple times.
  

  

• create a global workflow that will handle all the focus events. Add 2 parameters elementName (remember to assign unique names to the inputs, so that you know what input triggered the event and you can decide what to do with it), and isFocus (true if it is focused, false when the focus is lost). Add here the logic you want.
  

• take note of the uid of the workflow
  

  

• add a second global workflow with a javascript action. It will set the event listeners
  

  

• the code for the javascript action will be:

// this is the boolean variable created on step 1
// you can find it in the variables menu in the editor
if (!variables[/* addedListeners */ "b1851a02-fc79-469e-94ee-fa3a5d39d156"]) {
	wwLib.getFrontDocument().addEventListener("focusin", (event) => {
		// use the uid of the first workflow
		wwLib.executeWorkflow("94d8100f-836c-4e5f-bd38-258c8a977380", {
			elementName: event.target.name,
			isFocus: true,
		});
	});
	wwLib.getFrontDocument().addEventListener("focusout", (event) => {
		// use the uid of the first workflow
		wwLib.executeWorkflow("94d8100f-836c-4e5f-bd38-258c8a977380", {
			elementName: event.target.name,
			isFocus: false,
		});
	});
	// this is the boolean variable created on step 1
	variables[/* addedListeners */ "b1851a02-fc79-469e-94ee-fa3a5d39d156"] = true;
}

• now to use it you just need to trigger this second workflow on page load
  
  

Result: