# UI Text Input Focus

**URL:** <https://discourse.nodered.org/t/ui-text-input-focus/8053>\
**Category:** Dashboard\
**Created:** [16 February 2019 17:27 UTC](https://discourse.nodered.org/t/ui-text-input-focus/8053 "2019-02-16T17:27:57Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![dwrona](https://avatars.discourse-cdn.com/v4/letter/d/90ced4/32.png) [@dwrona](https://discourse.nodered.org/u/dwrona)\
**Post date:** [16 February 2019 17:27 UTC](https://discourse.nodered.org/t/ui-text-input-focus/8053/1 "2019-02-16T17:27:57Z")

</div>

Hello,  
I have three text inputs and would like to use a scanner for input to these nodes. When the user enters the third node I want the focus to direct back to the 3rd text input. I have tried several ways of doing so through UI template nodes and believe that the solution lies with a JQuery .focus. However, the id of the nodes (for CSS selector) changes each time the flow is deployed so I can't assign focus correctly. Is there a way to assign an ID to the standard dashboard text input nodes or is there another way to direct the flow through my dashboard with use of focus?

---

<div class="post-metadata">

**Author:** ![coffeegoat](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/coffeegoat/32/16978_2.png) [@coffeegoat](https://discourse.nodered.org/u/coffeegoat)\
**Post date:** [3 October 2019 19:49 UTC](https://discourse.nodered.org/t/ui-text-input-focus/8053/2 "2019-10-03T19:49:54Z")

</div>

I have essentially the exact same problem. I have a project where the user only has limited access to the UI, mostly via a barcode scanner. The barcode scanner is configured to complete its text entry with a tab character which will tab through several dashboard text inputs. Using the example provided here in the bug report here: [https://github.com/node-red/node-red-dashboard/issues/359](https://github.com/node-red/node-red-dashboard/issues/359) I was able to get first box auto-selected upon startup. However, where I'm stumped is how to reset the focus back to the first text input box once the user has fully gone through one cycle of the program. Is there a way to do this?

---

<div class="post-metadata">

**Author:** ![coffeegoat](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/coffeegoat/32/16978_2.png) [@coffeegoat](https://discourse.nodered.org/u/coffeegoat)\
**Post date:** [7 October 2019 20:04 UTC](https://discourse.nodered.org/t/ui-text-input-focus/8053/3 "2019-10-07T20:04:43Z")

</div>

I worked on it for a while but was unable to get a trigger event/function to re-catch the focus on the start up box. There were a variety of examples I found where the standard JS approach was to use the getElementByID("ID").focus() method but as I understand it the ID of a node can/does change so it isn't possible to use it as a method to move focus around. Am I missing something here and this is the right way to do it?

Eventually I just gave up and switched tabs back and forth to make the focus go back to the first text entry box. It's a bit of a hack, but I need to get on to other things.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [7 October 2019 20:19 UTC](https://discourse.nodered.org/t/ui-text-input-focus/8053/4 "2019-10-07T20:19:03Z")

</div>

Have you not considered using a ui\_template node, create your own text inputs with fixed IDs.

This thread I commented on was similar (though I got no feedback so no idea if it was suitable)...

> [@In need of some help - Modal text input with cancel](https://discourse.nodered.org/t/in-need-of-some-help-modal-text-input-with-cancel/15125/12):
>
> You could simply add a bit script so that when the input box loses focus, you simply set focus once more. \<script type="text/javascript"\> var element= document.getElementById('return\_value'); element.focus(); element.onblur= function() { setTimeout(function() { element.focus(); }, 0); }; \</script\>

---

<div class="post-metadata">

**Author:** ![Mr\_Li](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mr_li/32/67089_2.png) [@Mr\_Li](https://discourse.nodered.org/u/Mr_Li)\
**Post date:** [20 March 2023 15:20 UTC](https://discourse.nodered.org/t/ui-text-input-focus/8053/5 "2023-03-20T15:20:25Z")

</div>

I want to set the focus for the text field after clicking the button to clear barcode data, reducing the click time. What should I do?

---

<div class="post-metadata">

**Author:** ![Mr\_Li](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mr_li/32/67089_2.png) [@Mr\_Li](https://discourse.nodered.org/u/Mr_Li)\
**Post date:** [20 March 2023 15:21 UTC](https://discourse.nodered.org/t/ui-text-input-focus/8053/6 "2023-03-20T15:21:12Z")

</div>

```auto
[
    {
        "id": "10347ce3.586fb3",
        "type": "ui_button",
        "z": "d5e31309.28ca2",
        "name": "",
        "group": "9c9a39bf.1be348",
        "order": 2,
        "width": 2,
        "height": 1,
        "passthru": false,
        "label": "clean",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "buttona",
        "icon": "",
        "payload": "",
        "payloadType": "str",
        "topic": "",
        "topicType": "str",
        "x": 210,
        "y": 340,
        "wires": [
            [
                "2c849fb770fa722f"
            ]
        ]
    },
    {
        "id": "a0afafc2f94aa44c",
        "type": "ui_text_input",
        "z": "d5e31309.28ca2",
        "name": "",
        "label": "Barcode_1",
        "tooltip": "",
        "group": "9c9a39bf.1be348",
        "order": 1,
        "width": 6,
        "height": 1,
        "passthru": true,
        "mode": "text",
        "delay": 300,
        "topic": "topic",
        "sendOnBlur": true,
        "className": "myclass_clean",
        "topicType": "msg",
        "x": 590,
        "y": 340,
        "wires": [
            []
        ]
    },
    {
        "id": "ab777a166bc90d1e",
        "type": "ui_template",
        "z": "d5e31309.28ca2",
        "group": "9c9a39bf.1be348",
        "name": "test",
        "order": 10,
        "width": 0,
        "height": 0,
        "format": "<div id=\"98887f3e0df97d45\" class=\"myclass_clean\" ></div>\n\n<script>\n action = function(){\n document.getElementById('myclass_clean').focus();\n }\n</script>\n<md-button onclick= 'action()'>\n<style>\n [node-id='87cecd4991652066'] {\n onclick='action()';\n }\n\n<style>\n",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 490,
        "y": 300,
        "wires": [
            []
        ]
    },
    {
        "id": "98887f3e0df97d45",
        "type": "ui_text_input",
        "z": "d5e31309.28ca2",
        "name": "",
        "label": "Barcode_2",
        "tooltip": "",
        "group": "9c9a39bf.1be348",
        "order": 3,
        "width": 6,
        "height": 1,
        "passthru": true,
        "mode": "text",
        "delay": 300,
        "topic": "topic",
        "sendOnBlur": true,
        "className": "myclass_clean",
        "topicType": "msg",
        "x": 590,
        "y": 380,
        "wires": [
            []
        ]
    },
    {
        "id": "87cecd4991652066",
        "type": "ui_button",
        "z": "d5e31309.28ca2",
        "name": "",
        "group": "9c9a39bf.1be348",
        "order": 4,
        "width": 2,
        "height": 1,
        "passthru": false,
        "label": "clean",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "buttona",
        "icon": "",
        "payload": "",
        "payloadType": "str",
        "topic": "",
        "topicType": "str",
        "x": 210,
        "y": 380,
        "wires": [
            [
                "0e280b9d6c732bb5"
            ]
        ]
    },
    {
        "id": "2c849fb770fa722f",
        "type": "change",
        "z": "d5e31309.28ca2",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "payload",
                "pt": "msg",
                "to": "",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 370,
        "y": 340,
        "wires": [
            [
                "a0afafc2f94aa44c"
            ]
        ]
    },
    {
        "id": "0e280b9d6c732bb5",
        "type": "change",
        "z": "d5e31309.28ca2",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "payload",
                "pt": "msg",
                "to": "",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 370,
        "y": 380,
        "wires": [
            [
                "98887f3e0df97d45"
            ]
        ]
    },
    {
        "id": "9c9a39bf.1be348",
        "type": "ui_group",
        "name": "Group1",
        "tab": "de7542ce.e7d19",
        "order": 2,
        "disp": true,
        "width": 8,
        "collapse": false
    },
    {
        "id": "de7542ce.e7d19",
        "type": "ui_tab",
        "name": "Tab1",
        "icon": "dashboard",
        "order": 31
    }
]

```

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [20 March 2023 16:33 UTC](https://discourse.nodered.org/t/ui-text-input-focus/8053/7 "2023-03-20T16:33:49Z")

</div>

See your other thread - [Input text focus - #2 by hotNipi](https://discourse.nodered.org/t/input-text-focus/76753/2)