# Best place for onFocus and onBlur events?

**URL:** <https://community.weweb.io/t/best-place-for-onfocus-and-onblur-events/1625>\
**Category:** Ask us anything\
**Created:** [December 20, 2022, 9:59pm UTC](https://community.weweb.io/t/best-place-for-onfocus-and-onblur-events/1625 "2022-12-20T21:59:18Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![dorilama](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/dorilama/32/10403_2.png) [@dorilama](https://community.weweb.io/u/dorilama)\
**Post date:** [December 28, 2022, 11:46am UTC](https://community.weweb.io/t/best-place-for-onfocus-and-onblur-events/1625/2 "2022-12-28T11:46:36Z")

</div>

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.  
 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/2/2e8ad2ba4f98fdd491bdece683178a6715a19bbe.png)

- 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:

```auto
// 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  
 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/b/b128d581acf7448c0527cd1294ce29988064505c.png)

Result:  
 ![chrome_FimPh5yBWF](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/f/f1a7a122db67c3483d4afc427462c0bc1e5e0b6d.gif)

---

_[View the full topic](https://community.weweb.io/t/best-place-for-onfocus-and-onblur-events/1625)._