# Reselect a text bar every 5 seconds

**URL:** <https://discourse.nodered.org/t/reselect-a-text-bar-every-5-seconds/69393>\
**Category:** General\
**Tags:** node-red-dashboard\
**Created:** [21 October 2022 17:52 UTC](https://discourse.nodered.org/t/reselect-a-text-bar-every-5-seconds/69393 "2022-10-21T17:52:09Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Engi](https://avatars.discourse-cdn.com/v4/letter/e/ac91a4/32.png) [@Engi](https://discourse.nodered.org/u/Engi)\
**Post date:** [21 October 2022 17:52 UTC](https://discourse.nodered.org/t/reselect-a-text-bar-every-5-seconds/69393/1 "2022-10-21T17:52:09Z")

</div>

Hello,  
I am writing a code for a barcode scanner that uses the node red dashboard to input data and one problem I'm having is that occasionally I will accidently click off the text bar and not notice. This causes all the scans that I do after this to not register. Right now I have a template node which successfully focusses me on the textbar each time I load the page, but I want it to load me back onto the text bar every 5 seconds or so. I've tried using a delay node with a loop but it doesn't seem to be working(See picture below). Is there any way to refocus on the text bar?

Thanks for any assistance!

---

<div class="post-metadata">

**Author:** ![Engi](https://avatars.discourse-cdn.com/v4/letter/e/ac91a4/32.png) [@Engi](https://discourse.nodered.org/u/Engi)\
**Post date:** [21 October 2022 17:52 UTC](https://discourse.nodered.org/t/reselect-a-text-bar-every-5-seconds/69393/2 "2022-10-21T17:52:39Z")

</div>

Whoops forgot to attach the picture

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/7/876d62cbc16578f0dcad7ffa3fbcb38d451b2eee.png)

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [21 October 2022 18:52 UTC](https://discourse.nodered.org/t/reselect-a-text-bar-every-5-seconds/69393/3 "2022-10-21T18:52:49Z")

</div>

You can use setInterval() in the ui-template node, that way the browser does all the work

> **[setInterval() - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/setInterval)**
>
> The setInterval() method,
> offered on the Window and Worker interfaces, repeatedly
> calls a function or executes a code snippet, with a fixed time delay between each
> call.

> **[setTimeout() / setInterval() Methods Running on Inactive Tab](https://usefulangle.com/post/280/settimeout-setinterval-on-inactive-tab)**
>
> Time delay for setTimeout() / setInterval() methods executing on inactive browser tabs are set to one second regardless of their value defined in code.

---

<div class="post-metadata">

**Author:** ![Engi](https://avatars.discourse-cdn.com/v4/letter/e/ac91a4/32.png) [@Engi](https://discourse.nodered.org/u/Engi)\
**Post date:** [24 October 2022 12:57 UTC](https://discourse.nodered.org/t/reselect-a-text-bar-every-5-seconds/69393/4 "2022-10-24T12:57:09Z")

</div>

Great, this should be what I'm looking for!

This may be a stupid question cus it's Monday morning and my brain probably isn't functioning fully yet, but how do I use this in the ui template node, I am using HTML to select the test bar but I am not too familiar with the language, or with the UI template node, so I'm not sure how to integrate this SetInterval() function

This is the code I am currently using:

```auto
<script> 
    $("input:text:visible:first").focus();
</script>

```

Thanks for the help.

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [24 October 2022 13:11 UTC](https://discourse.nodered.org/t/reselect-a-text-bar-every-5-seconds/69393/5 "2022-10-24T13:11:49Z")

</div>

The simplest format would be something like this

```auto
<script>
   setInterval(() => { $("input:text:visible:first").focus(); },5000)
</script>

```

but something like this may be safer

```auto
document.addEventListener('visibilitychange', function() {
    if(document.hidden) {
        // tab is now inactive
        // temporarily clear timer using clearInterval() / clearTimeout()
        clearInterval(intervalNum)
    }
    else {
        // tab is active again
        // restart timers
       var intervalNum = setInterval(() => { $("input:text:visible:first").focus(); },5000)
    }
});

```

All untested.

---

<div class="post-metadata">

**Author:** ![Engi](https://avatars.discourse-cdn.com/v4/letter/e/ac91a4/32.png) [@Engi](https://discourse.nodered.org/u/Engi)\
**Post date:** [24 October 2022 13:18 UTC](https://discourse.nodered.org/t/reselect-a-text-bar-every-5-seconds/69393/6 "2022-10-24T13:18:08Z")

</div>

Works great,  
Thanks!

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [7 November 2022 13:18 UTC](https://discourse.nodered.org/t/reselect-a-text-bar-every-5-seconds/69393/7 "2022-11-07T13:18:21Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.