# Select all content of input on click

**URL:** <https://discourse.nodered.org/t/select-all-content-of-input-on-click/58197>\
**Category:** Dashboard\
**Created:** [12 February 2022 08:44 UTC](https://discourse.nodered.org/t/select-all-content-of-input-on-click/58197 "2022-02-12T08:44:31Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![tbobek](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tbobek/32/45711_2.png) [@tbobek](https://discourse.nodered.org/u/tbobek)\
**Post date:** [12 February 2022 08:44 UTC](https://discourse.nodered.org/t/select-all-content-of-input-on-click/58197/1 "2022-02-12T08:44:32Z")

</div>

Currently I‘m developing a front end for a plant operator to input data from production. One requirement is that the input can happen as fast as possible. The complete contents of the input should be selected when the operator clicks on it. This enables him to start typing new content immediately.

I‘ve created a custom input with an ˋui-template ˋ , md-input-containerˋ and ˋinputˋ elements and added an attribute ˋmd-select-on-focusˋ which in principle works, but this custom input field is much larger in size for whatever reason, like double of the normal height. This makes it impossible to arrange the required number of input fields on the screen.

The second attempt, to add css attributes to the standard input fields as header css with an ui-template had surprisingly no effect.

Does anyone know how to achieve this requirement?

```auto
[
    {
        "id": "a34331e3cff7a6db",
        "type": "ui_text_input",
        "z": "c68c434ebd730183",
        "name": "",
        "label": "Input 1",
        "tooltip": "",
        "group": "2839cdb7970bcfe6",
        "order": 1,
        "width": 0,
        "height": 0,
        "passthru": true,
        "mode": "number",
        "delay": 300,
        "topic": "topic",
        "sendOnBlur": true,
        "className": "",
        "topicType": "msg",
        "x": 450,
        "y": 180,
        "wires": [
            []
        ]
    },
    {
        "id": "f8ab290dd33a65bf",
        "type": "ui_text_input",
        "z": "c68c434ebd730183",
        "name": "",
        "label": "Input 2",
        "tooltip": "",
        "group": "2839cdb7970bcfe6",
        "order": 2,
        "width": 0,
        "height": 0,
        "passthru": true,
        "mode": "number",
        "delay": 300,
        "topic": "topic",
        "sendOnBlur": true,
        "className": "",
        "topicType": "msg",
        "x": 450,
        "y": 220,
        "wires": [
            []
        ]
    },
    {
        "id": "c0b591da9da4bcea",
        "type": "ui_text_input",
        "z": "c68c434ebd730183",
        "name": "",
        "label": "Input 3",
        "tooltip": "",
        "group": "2839cdb7970bcfe6",
        "order": 3,
        "width": 0,
        "height": 0,
        "passthru": true,
        "mode": "number",
        "delay": 300,
        "topic": "topic",
        "sendOnBlur": true,
        "className": "",
        "topicType": "msg",
        "x": 450,
        "y": 260,
        "wires": [
            []
        ]
    },
    {
        "id": "7e03f313a420abc4",
        "type": "ui_text_input",
        "z": "c68c434ebd730183",
        "name": "",
        "label": "Input 4",
        "tooltip": "",
        "group": "2839cdb7970bcfe6",
        "order": 4,
        "width": 0,
        "height": 0,
        "passthru": true,
        "mode": "number",
        "delay": 300,
        "topic": "topic",
        "sendOnBlur": true,
        "className": "",
        "topicType": "msg",
        "x": 450,
        "y": 300,
        "wires": [
            []
        ]
    },
    {
        "id": "d8a32ef60493dfb6",
        "type": "ui_template",
        "z": "c68c434ebd730183",
        "group": "618988f65db60b7f",
        "name": "Titel2",
        "order": 2,
        "width": 0,
        "height": 0,
        "format": "<md-input-container>\n <label>Titel2</label>\n <input type=\"number\" md-select-on-focus>\n</md-input-container>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 710,
        "y": 220,
        "wires": [
            []
        ]
    },
    {
        "id": "2e9ab8e295622786",
        "type": "ui_template",
        "z": "c68c434ebd730183",
        "group": "618988f65db60b7f",
        "name": "Titel3",
        "order": 3,
        "width": 0,
        "height": 0,
        "format": "<md-input-container>\n <label>Titel3</label>\n <input type=\"number\" md-select-on-focus>\n</md-input-container>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 710,
        "y": 260,
        "wires": [
            []
        ]
    },
    {
        "id": "c759278f3e3549f9",
        "type": "ui_template",
        "z": "c68c434ebd730183",
        "group": "618988f65db60b7f",
        "name": "Titel4",
        "order": 4,
        "width": 0,
        "height": 0,
        "format": "<md-input-container>\n <label>Titel4</label>\n <input type=\"number\" md-select-on-focus>\n</md-input-container>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 710,
        "y": 300,
        "wires": [
            []
        ]
    },
    {
        "id": "6f83e79f808f124c",
        "type": "ui_template",
        "z": "c68c434ebd730183",
        "group": "2839cdb7970bcfe6",
        "name": "",
        "order": 4,
        "width": 0,
        "height": 0,
        "format": "<style>\n input: {\n md-select-on-focus\n }\n</style>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "global",
        "className": "",
        "x": 170,
        "y": 200,
        "wires": [
            []
        ]
    },
    {
        "id": "eddda2254c3c5d93",
        "type": "ui_template",
        "z": "c68c434ebd730183",
        "group": "618988f65db60b7f",
        "name": "Titel1",
        "order": 1,
        "width": 0,
        "height": 0,
        "format": "<md-input-container>\n <label>Titel1</label>\n <input type=\"number\" md-select-on-focus>\n</md-input-container>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 710,
        "y": 180,
        "wires": [
            []
        ]
    },
    {
        "id": "2839cdb7970bcfe6",
        "type": "ui_group",
        "name": "Column1",
        "tab": "f3c98c364bdd77f3",
        "order": 1,
        "disp": true,
        "width": "3",
        "collapse": false,
        "className": ""
    },
    {
        "id": "618988f65db60b7f",
        "type": "ui_group",
        "name": "Template Inputs",
        "tab": "f3c98c364bdd77f3",
        "order": 2,
        "disp": true,
        "width": "6",
        "collapse": false,
        "className": ""
    },
    {
        "id": "f3c98c364bdd77f3",
        "type": "ui_tab",
        "name": "Home",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    }
]

```

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [12 February 2022 09:55 UTC](https://discourse.nodered.org/t/select-all-content-of-input-on-click/58197/2 "2022-02-12T09:55:58Z")

</div>

Share that ui\_template. It takes to see your implementation to give any advises.

---

<div class="post-metadata">

**Author:** ![tbobek](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tbobek/32/45711_2.png) [@tbobek](https://discourse.nodered.org/u/tbobek)\
**Post date:** [12 February 2022 10:06 UTC](https://discourse.nodered.org/t/select-all-content-of-input-on-click/58197/3 "2022-02-12T10:06:07Z")

</div>

Sorry, please see my updated post!

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [14 February 2022 08:21 UTC](https://discourse.nodered.org/t/select-all-content-of-input-on-click/58197/4 "2022-02-14T08:21:18Z")

</div>

By adding all the classes the original numeric input uses, the results are quite promising. You may find solution that way

```auto
[{"id":"a34331e3cff7a6db","type":"ui_text_input","z":"afcfe6f7a144f0b4","name":"","label":"Input 1","tooltip":"","group":"2839cdb7970bcfe6","order":1,"width":0,"height":0,"passthru":true,"mode":"number","delay":300,"topic":"topic","topicType":"msg","x":270,"y":1180,"wires":[[]]},{"id":"f8ab290dd33a65bf","type":"ui_text_input","z":"afcfe6f7a144f0b4","name":"","label":"Input 2","tooltip":"","group":"2839cdb7970bcfe6","order":2,"width":0,"height":0,"passthru":true,"mode":"number","delay":300,"topic":"topic","topicType":"msg","x":270,"y":1220,"wires":[[]]},{"id":"c0b591da9da4bcea","type":"ui_text_input","z":"afcfe6f7a144f0b4","name":"","label":"Input 3","tooltip":"","group":"2839cdb7970bcfe6","order":3,"width":0,"height":0,"passthru":true,"mode":"number","delay":300,"topic":"topic","topicType":"msg","x":270,"y":1260,"wires":[[]]},{"id":"7e03f313a420abc4","type":"ui_text_input","z":"afcfe6f7a144f0b4","name":"","label":"Input 4","tooltip":"","group":"2839cdb7970bcfe6","order":4,"width":0,"height":0,"passthru":true,"mode":"number","delay":300,"topic":"topic","topicType":"msg","x":270,"y":1300,"wires":[[]]},{"id":"d8a32ef60493dfb6","type":"ui_template","z":"afcfe6f7a144f0b4","group":"618988f65db60b7f","name":"Titel2","order":2,"width":"6","height":"1","format":"<md-input-container class=\"md-block md-auto-horizontal-margin flex has-label\">\n <label>Titel2</label>\n <input type=\"number\" md-select-on-focus>\n</md-input-container>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"nr-dashboard-numeric nr-dashboard-textinput _md layout-align-space-between-center layout-row visible template-numeric","x":450,"y":1220,"wires":[[]]},{"id":"2e9ab8e295622786","type":"ui_template","z":"afcfe6f7a144f0b4","group":"618988f65db60b7f","name":"Titel3","order":3,"width":"6","height":"1","format":"<md-input-container class=\"md-block md-auto-horizontal-margin flex has-label\">\n <label>Titel3</label>\n <input type=\"number\" md-select-on-focus>\n</md-input-container>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"nr-dashboard-numeric nr-dashboard-textinput _md layout-align-space-between-center layout-row visible template-numeric","x":450,"y":1260,"wires":[[]]},{"id":"c759278f3e3549f9","type":"ui_template","z":"afcfe6f7a144f0b4","group":"618988f65db60b7f","name":"Titel4","order":4,"width":"6","height":"1","format":"<md-input-container class=\"md-block md-auto-horizontal-margin flex has-label\">\n <label>Titel4</label>\n <input type=\"number\" md-select-on-focus>\n</md-input-container>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"nr-dashboard-numeric nr-dashboard-textinput _md layout-align-space-between-center layout-row visible template-numeric","x":450,"y":1300,"wires":[[]]},{"id":"6f83e79f808f124c","type":"ui_template","z":"afcfe6f7a144f0b4","group":"2839cdb7970bcfe6","name":"","order":4,"width":0,"height":0,"format":"<style>\n .template-numeric{\n overflow:hidden;\n }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","className":"","x":460,"y":1140,"wires":[[]]},{"id":"17b1fe219e1b8ce9","type":"ui_template","z":"afcfe6f7a144f0b4","group":"618988f65db60b7f","name":"Titel1","order":1,"width":"6","height":"1","format":"<md-input-container class=\"md-block md-auto-horizontal-margin flex has-label\">\n <label>Titel1</label>\n <input type=\"number\" md-select-on-focus>\n</md-input-container>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"nr-dashboard-numeric nr-dashboard-textinput _md layout-align-space-between-center layout-row visible template-numeric","x":450,"y":1180,"wires":[[]]},{"id":"2839cdb7970bcfe6","type":"ui_group","name":"Column1","tab":"f3c98c364bdd77f3","order":1,"disp":true,"width":"3","collapse":false},{"id":"618988f65db60b7f","type":"ui_group","name":"Template Inputs","tab":"f3c98c364bdd77f3","order":2,"disp":true,"width":"6","collapse":false},{"id":"f3c98c364bdd77f3","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<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:** [16 March 2022 08:22 UTC](https://discourse.nodered.org/t/select-all-content-of-input-on-click/58197/5 "2022-03-16T08:22:18Z")

</div>

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