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?
1 Like
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 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?
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.
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)...
1 Like
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?
[
{
"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
}
]
See your other thread - Input text focus - #2 by hotNipi
