dashboard text input, how to enable autofocus

[Andres Miyara]

Hi, as mentioned on the title, i need to enable the autofocus of a text input, there is a way to do that?

[Julian Knight]

You should certainly be able to do that. Although you can do it with Angular, since JQuery is included in the bundle for the Dashboard UI, you can use that as it will most likely be easier.

https://api.jquery.com/focus/

[Andres Miyara]

Thanks for the answer Julian, but i wasn't able to understand it. Where should i add this property?

[Julian Knight]

Probably the easiest way is to put it into a Dashboard template node. That makes it available to the client browser. If your input is generated by one of the Dashboard's widgets, you may have to use the developer tools in your browser to find the appropriate CSS selector for the field.

You may need to do a little reading on how JQuery works.

[Silvia]

Hi @Andres, did you find a way of doing it? Could you share the solution, please? Thanks :) 

On Thursday, 4 January 2018 14:04:00 UTC, Andres Miyara wrote:

[Andres Miyara]

Silvia, i came up with this

https://pastebin.com/qMDUuGwE

the problem is that i don't know how to "recover" the info that i upload, so i didn't go further

[Silvia]

Hi Andres,

With your flow and a bit of help from here: https://cookbook.nodered.org/http/post-form-data-to-a-flow I've sorted it out.

The action in the template needs to point to a URL, and then you can have a HTTP input which listens to that URL. The input you're looking for is in msg.payload.xxx.

Please see this flow below. I've added a delay and a 'clear' so that the input is cleared after being submitted.

I hope it helps!

[{"id":"324f64ed.7cc94c","type":"ui_template","z":"dfdd99b9.ed7918","group":"ecf46912.a425a8","name":"input","order":0,"width":0,"height":0,"format":"<form action=\"/getPN\" method=\"post\">\n  <input type=\"text\" name=\"PN\" ng-model=\"msg.payload\" autofocus><br>\n  <input type=\"submit\">\n</form>","storeOutMessages":true,"fwdInMessages":false,"templateScope":"local","x":270,"y":340,"wires":[[]]},{"id":"39be4fd3.9f5c9","type":"http in","z":"dfdd99b9.ed7918","name":"","url":"/getPN","method":"post","upload":false,"swaggerDoc":"","x":490,"y":340,"wires":[["b8d836f.58d02c8","214193c5.bb7c8c"]]},{"id":"b8d836f.58d02c8","type":"debug","z":"dfdd99b9.ed7918","name":"","active":true,"console":"false","complete":"payload.PN","x":740,"y":340,"wires":[]},{"id":"214193c5.bb7c8c","type":"delay","z":"dfdd99b9.ed7918","name":"","pauseType":"delay","timeout":"10","timeoutUnits":"milliseconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"x":210,"y":260,"wires":[["74eb9fd2.f4eae"]]},{"id":"74eb9fd2.f4eae","type":"function","z":"dfdd99b9.ed7918","name":"clear","func":"msg.payload = \"\";\n\nreturn msg;","outputs":1,"noerr":0,"x":370,"y":260,"wires":[["324f64ed.7cc94c"]]},{"id":"ecf46912.a425a8","type":"ui_group","z":"","name":"Autofocus","tab":"91289bdf.9cfe78","order":1,"disp":true,"width":"6","collapse":false},{"id":"91289bdf.9cfe78","type":"ui_tab","z":"","name":"Home","icon":"dashboard","order":3}]

[Andres Miyara]

Silvia, thanks for your reply, it works really well. One thing to mention, in the case that you need multiple variables a function node is needed to divide the different variables. It would be nice that the template node accept outputs or the text input node had autofocus.

[Andres Miyara]

Silvia, thanks to developers of the dashboard, i've a better solution, 

https://pastebin.com/1kjQkBKs

i hope that it works good for you.

[Silvia]

So much better! I've just come across the GitHub for that and was about to post it here hahaha

I ended up adding a template node with the following code in it, though:

<script>

    

    var el = document.querySelectorAll("input[type=\"text\"")[0],

    

        setFocus = function() {

            if (el) {

                el.focus();

            }

            

            setTimeout(setFocus, 100);

        };

    

    setFocus();

    

</script>