# 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:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![kevinwasie](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/kevinwasie/32/402_2.png) [@kevinwasie](https://community.weweb.io/u/kevinwasie)\
**Post date:** [December 20, 2022, 9:59pm UTC](https://community.weweb.io/t/best-place-for-onfocus-and-onblur-events/1625/1 "2022-12-20T21:59:18Z")

</div>

Where/how should we handle onFocus and onBlur events for elements?

In particular, I’d like to show a modal when the focus is on an input element.

---

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

---

<div class="post-metadata">

**Author:** ![kevinwasie](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/kevinwasie/32/402_2.png) [@kevinwasie](https://community.weweb.io/u/kevinwasie)\
**Post date:** [December 28, 2022, 1:40pm UTC](https://community.weweb.io/t/best-place-for-onfocus-and-onblur-events/1625/3 "2022-12-28T13:40:08Z")

</div>

Brilliant! Thank you @dorilama

---

<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, 2:23pm UTC](https://community.weweb.io/t/best-place-for-onfocus-and-onblur-events/1625/4 "2022-12-28T14:23:53Z")

</div>

Happy to help. 🙂

this is possible now because weweb team recently exposed this function to trigger workflows from javascript.

---

<div class="post-metadata">

**Author:** ![George](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/george/32/1661_2.png) [@George](https://community.weweb.io/u/George)\
**Post date:** [January 19, 2023, 10:04am UTC](https://community.weweb.io/t/best-place-for-onfocus-and-onblur-events/1625/5 "2023-01-19T10:04:47Z")

</div>

Hi @dorilama

I’m trying to run this JS by button click with class=“btn” and id=“payButton”. It works with a second click on the button. This button also submit workflow with current JS code. I’m not familiar with JS and can’t figure out what’s wrong.  
Hoping you can help me find solution

let btn = getElementById(“payButton”)  
//let language = navigator.language //or fix  
let language = “ru-RU”

function pay() {  
var widget = new cp.CloudPayments({  
language: language  
})  
widget.pay(‘charge’, // или ‘charge’  
{ //options  
publicId: ‘test\_api\_00000000000000000000002’, //id из личного кабинета  
description: ‘Оплата товаров в [example.com](http://example.com)’, //назначение  
amount: 1000, //сумма  
currency: ‘USD’, //валюта  
accountId: ‘user@example.com’, //идентификатор плательщика (необязательно)  
invoiceId: ‘1234567’, //номер заказа (необязательно)  
skin: “mini”, //дизайн виджета (необязательно)  
autoClose: 3  
}, {  
onSuccess: function(options) { // success  
//действие при успешной оплате  
},  
onFail: function(reason, options) { // fail  
//действие при неуспешной оплате  
},  
onComplete: function(paymentResult, options) { //Вызывается как только виджет получает от api.cloudpayments ответ с результатом транзакции.  
//например вызов вашей аналитики Facebook Pixel  
}  
}  
)  
}

[//window.addEventListener](https://window.addEventListener)(‘load’, pay)  
btn.addEventListener(‘click’, pay)

---

<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:** [January 20, 2023, 2:18pm UTC](https://community.weweb.io/t/best-place-for-onfocus-and-onblur-events/1625/6 "2023-01-20T14:18:59Z")

</div>

this topic is about focus and blur events. If you have an unrelated question it’s better to create a new topic so that people in the community can find your question and reply.

At a first glance it looks like you are just copy/pasting code with a lot of problems.

My advice is to try to understand the code you are using. A websites like [freecodecamp](https://www.freecodecamp.org/) is a great starting point. Of course the documentation of the library you are using is going to be helpful as well.

---

<div class="post-metadata">

**Author:** ![carri](https://avatars.discourse-cdn.com/v4/letter/c/c57346/32.png) [@carri](https://community.weweb.io/u/carri)\
**Post date:** [January 22, 2023, 4:02pm UTC](https://community.weweb.io/t/best-place-for-onfocus-and-onblur-events/1625/7 "2023-01-22T16:02:46Z")

</div>

Chat GPT is so good at telling me answers to what is wrong with my code. If you haven’t asked Chatty, I’d suggest you try that.

---

<div class="post-metadata">

**Author:** ![carri](https://avatars.discourse-cdn.com/v4/letter/c/c57346/32.png) [@carri](https://community.weweb.io/u/carri)\
**Post date:** [January 22, 2023, 4:03pm UTC](https://community.weweb.io/t/best-place-for-onfocus-and-onblur-events/1625/8 "2023-01-22T16:03:07Z")

</div>

So helpful! Using this. Thx!

---

<div class="post-metadata">

**Author:** ![George](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/george/32/1661_2.png) [@George](https://community.weweb.io/u/George)\
**Post date:** [January 23, 2023, 4:39am UTC](https://community.weweb.io/t/best-place-for-onfocus-and-onblur-events/1625/9 "2023-01-23T04:39:54Z")

</div>

Thank you for the advice!  
I understand what this code does, even I can run it in Codepen. But it doesn’t actually work in my published Weweb application.

---

<div class="post-metadata">

**Author:** ![carri](https://avatars.discourse-cdn.com/v4/letter/c/c57346/32.png) [@carri](https://community.weweb.io/u/carri)\
**Post date:** [January 25, 2023, 12:32am UTC](https://community.weweb.io/t/best-place-for-onfocus-and-onblur-events/1625/10 "2023-01-25T00:32:18Z")

</div>

> [@dorilama](#):
>
> ```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;
> }
> 
> ```

How do you see the UID? It doesn’t show for me.

---

<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:** [January 25, 2023, 10:24am UTC](https://community.weweb.io/t/best-place-for-onfocus-and-onblur-events/1625/11 "2023-01-25T10:24:47Z")

</div>

You need to click “show dev informations”

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/b/b06d9eee41665e4d3d9409ea311c07dc080ef520.png)