# Button on click popup number pad

**URL:** <https://discourse.nodered.org/t/button-on-click-popup-number-pad/9802>\
**Category:** Dashboard\
**Created:** [5 April 2019 11:31 UTC](https://discourse.nodered.org/t/button-on-click-popup-number-pad/9802 "2019-04-05T11:31:40Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![sachin](https://avatars.discourse-cdn.com/v4/letter/s/c77e96/32.png) [@sachin](https://discourse.nodered.org/u/sachin)\
**Post date:** [5 April 2019 11:31 UTC](https://discourse.nodered.org/t/button-on-click-popup-number-pad/9802/1 "2019-04-05T11:31:40Z")

</div>

number pad should pop up on click a button and button color should change based on the number pad color

---

<div class="post-metadata">

**Author:** ![ukmoose](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ukmoose/32/13_2.png) [@ukmoose](https://discourse.nodered.org/u/ukmoose)\
**Post date:** [5 April 2019 11:35 UTC](https://discourse.nodered.org/t/button-on-click-popup-number-pad/9802/2 "2019-04-05T11:35:04Z")

</div>

I assume this is something you are trying to build?

How far have you got?  
Which bit are you stuck on?

---

<div class="post-metadata">

**Author:** ![sachin](https://avatars.discourse-cdn.com/v4/letter/s/c77e96/32.png) [@sachin](https://discourse.nodered.org/u/sachin)\
**Post date:** [5 April 2019 11:39 UTC](https://discourse.nodered.org/t/button-on-click-popup-number-pad/9802/3 "2019-04-05T11:39:31Z")

</div>

i know nothing. i just altered this code like this  
[{"id":"7a9bc126.b9db1","type":"ui\_template","z":"3f1a8c89.a625e4","group":"243613c4.9e22dc","name":"Virtual Keyboard","order":1,"width":0,"height":0,"format":"\n\n\n\n.VK{\n position: fixed;\n top: 60px;\n right: 20px;\n height: 30px;\n}\n\n\n\<div id="empty"\>\n\<button class="VK"\>V-KeyBoard On \n\n\n","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":355,"y":282,"wires":[]},{"id":"243613c4.9e22dc","type":"ui\_group","z":"","name":"Users","tab":"e1aa29f5.2bcc18","order":2,"disp":true,"width":"9","collapse":false},{"id":"e1aa29f5.2bcc18","type":"ui\_tab","z":"","name":"Home Tab","icon":"dashboard","order":3}]

---

<div class="post-metadata">

**Author:** ![ukmoose](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ukmoose/32/13_2.png) [@ukmoose](https://discourse.nodered.org/u/ukmoose)\
**Post date:** [5 April 2019 11:50 UTC](https://discourse.nodered.org/t/button-on-click-popup-number-pad/9802/4 "2019-04-05T11:50:06Z")

</div>

Unfortunately your flow isn't currently importable.Please read the following post [How to share code or flow json](https://discourse.nodered.org/t/how-to-share-code-or-flow-json/506?u=ukmoose) and then **edit** the above message.

If you are using any specific nodes please can you list them.

---

<div class="post-metadata">

**Author:** ![sachin](https://avatars.discourse-cdn.com/v4/letter/s/c77e96/32.png) [@sachin](https://discourse.nodered.org/u/sachin)\
**Post date:** [5 April 2019 12:28 UTC](https://discourse.nodered.org/t/button-on-click-popup-number-pad/9802/5 "2019-04-05T12:28:25Z")

</div>

```auto
[
    {
        "id": "b973810a.e5c0f",
        "type": "debug",
        "z": "1f6b105a.a3f8d",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "x": 490,
        "y": 460,
        "wires": []
    },
    {
        "id": "45aa8956.0aacf8",
        "type": "debug",
        "z": "1f6b105a.a3f8d",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "x": 490,
        "y": 420,
        "wires": []
    },
    {
        "id": "c5db1e72.3ef58",
        "type": "ui_template",
        "z": "1f6b105a.a3f8d",
        "group": "6a4d510d.5de65",
        "name": "Virtual Keyboard",
        "order": 1,
        "width": 0,
        "height": 0,
        "format": "<script> \n \n// the semi-colon before function invocation is a safety net against concatenated\n// scripts and/or other plugins which may not be closed properly.\n; (function ($, window, document, undefined) {\n\n // undefined is used here as the undefined global variable in ECMAScript 3 is\n // mutable (ie. it can be changed by someone else). undefined isn't really being\n // passed in so we can ensure the value of it is truly undefined. In ES5, undefined\n // can no longer be modified.\n\n // window and document are passed through as local variable rather than global\n // as this (slightly) quickens the resolution process and can be more efficiently\n // minified (especially when both are regularly referenced in your plugin).\n\n // Create the defaults once\n var pluginName = \"jkeyboard\",\n defaults = {\n layout: \"english\",\n input: $('#input'),\n customLayouts: {\n selectable: []\n },\n };\n\n\n var function_keys = {\n backspace: {\n text: 'DEL',\n },\n return: {\n text: 'Enter'\n },\n shift: {\n text: 'Shift'\n },\n space: {\n text: 'Space'\n },\n numeric_switch: {\n text: '123',\n command: function () {\n this.createKeyboard('numeric');\n this.events();\n }\n },\n layout_switch: {\n text: '<i class=\"fa fa-keyboard-o\" aria-hidden=\"true\"></i>',\n command: function () {\n var l = this.toggleLayout();\n this.createKeyboard(l);\n this.events();\n }\n },\n character_switch: {\n text: 'ABC',\n command: function () {\n this.createKeyboard(layout);\n this.events();\n }\n },\n symbol_switch: {\n text: '#+=',\n command: function () {\n this.createKeyboard('symbolic');\n this.events();\n }\n }\n };\n\n\n var layouts = {\n selectable: ['azeri', 'english', 'russian','french', 'emoji'],\n azeri: [\n ['q', 'ü', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p', 'ö', 'ğ'],\n ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', 'ı', 'ə'],\n ['shift', 'z', 'x', 'c', 'v', 'b', 'n', 'm', 'ç', 'ş', 'backspace'],\n ['numeric_switch', 'layout_switch', 'space', 'return']\n ],\n english: [\n ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p',],\n ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l',],\n ['shift', 'z', 'x', 'c', 'v', 'b', 'n', 'm', 'backspace'],\n ['numeric_switch', 'layout_switch', 'space', 'return']\n ],\n russian: [\n ['й', 'ц', 'у', 'к', 'е', 'н', 'г', 'ш', 'щ', 'з', 'х'],\n ['ф', 'ы', 'в', 'а', 'п', 'р', 'о', 'л', 'д', 'ж', 'э'],\n ['shift', 'я', 'ч', 'с', 'м', 'и', 'т', 'ь', 'б', 'ю', 'backspace'],\n ['numeric_switch', 'layout_switch', 'space', 'return']\n ],\n french: [\n ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p',],\n ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l','à','ç'],\n ['shift', 'z', 'x', 'c', 'v', 'b', 'n', 'm','é','è', 'backspace'],\n ['numeric_switch', 'layout_switch', 'space', 'return']\n ],\n emoji: [\n ['😀', '😁', '😂', '🤣', '😃', '😄', '😅', '😆', '😉', '😊',],\n ['😋', '😎', '😍', '😘', 'g', 'h', 'j', 'k', 'l','à','ç'],\n ['shift', 'z', 'x', 'c', 'v', 'b', 'n', 'm','é','è', 'backspace'],\n ['numeric_switch', 'layout_switch', 'space', 'return']\n ], \n numeric: [\n ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],\n ['-', '/', ':', ';', '(', ')', '$', '&', '@', '\"'],\n ['symbol_switch', '.', ',', '?', '!', \"'\", 'backspace'],\n ['character_switch', 'layout_switch', 'space', 'return'],\n ],\n numbers_only: [\n ['1', '2', '3',],\n ['4', '5', '6',],\n ['7', '8', '9',],\n ['0', 'return', 'backspace'],\n ],\n symbolic: [\n ['[', ']', '{', '}', '#', '%', '^', '*', '+', '='],\n ['_', '\\\\', '|', '~', '<', '>'],\n ['numeric_switch', '.', ',', '?', '!', \"'\", 'backspace'],\n ['character_switch', 'layout_switch', 'space', 'return'],\n\n ]\n }\n\n var shift = false, capslock = false, layout = 'english', layout_id = 0;\n\n // The actual plugin constructor\n function Plugin(element, options) {\n this.element = element;\n // jQuery has an extend method which merges the contents of two or\n // more objects, storing the result in the first object. The first object\n // is generally empty as we don't want to alter the default options for\n // future instances of the plugin\n this.settings = $.extend({}, defaults, options);\n // Extend & Merge the cusom layouts\n layouts = $.extend(true, {}, this.settings.customLayouts, layouts);\n if (Array.isArray(this.settings.customLayouts.selectable)) {\n $.merge(layouts.selectable, this.settings.customLayouts.selectable);\n }\n this._defaults = defaults;\n this._name = pluginName;\n this.init();\n }\n\n Plugin.prototype = {\n init: function () {\n layout = this.settings.layout;\n this.createKeyboard(layout);\n this.events();\n },\n\n setInput: function (newInputField) {\n this.settings.input = newInputField;\n },\n\n createKeyboard: function (layout) {\n shift = false;\n capslock = false;\n\n var keyboard_container = $('<ul/>').addClass('jkeyboard'),\n me = this;\n\n layouts[layout].forEach(function (line, index) {\n var line_container = $('<li/>').addClass('jline');\n line_container.append(me.createLine(line));\n keyboard_container.append(line_container);\n });\n\n $(this.element).html('').append(keyboard_container);\n },\n\n createLine: function (line) {\n var line_container = $('<ul/>');\n\n line.forEach(function (key, index) {\n var key_container = $('<li/>').addClass('jkey').data('command', key);\n\n if (function_keys[key]) {\n key_container.addClass(key).html(function_keys[key].text);\n }\n else {\n key_container.addClass('letter').html(key);\n }\n\n line_container.append(key_container);\n })\n\n return line_container;\n },\n\n events: function () {\n var letters = $(this.element).find('.letter'),\n shift_key = $(this.element).find('.shift'),\n space_key = $(this.element).find('.space'),\n backspace_key = $(this.element).find('.backspace'),\n return_key = $(this.element).find('.return'),\n\n me = this,\n fkeys = Object.keys(function_keys).map(function (k) {\n return '.' + k;\n }).join(',');\n\n letters.on('click', function () {\n me.type((shift || capslock) ? $(this).text().toUpperCase() : $(this).text());\n });\n\n space_key.on('click', function () {\n me.type(' ');\n });\n\n return_key.on('click', function () {\n me.type(\"\\n\");\n me.settings.input.parents('form').submit();\n });\n\n backspace_key.on('click', function () {\n me.backspace();\n });\n\n shift_key.on('click', function () {\n if (capslock) {\n me.toggleShiftOff();\n capslock = false;\n } else {\n me.toggleShiftOn();\n }\n }).on('dblclick', function () {\n capslock = true;\n });\n\n\n $(fkeys).on('click', function () {\n var command = function_keys[$(this).data('command')].command;\n if (!command) return;\n\n command.call(me);\n });\n },\n\n type: function (key) {\n var input = this.settings.input,\n val = input.val(),\n input_node = input.get(0),\n start = input_node.selectionStart,\n end = input_node.selectionEnd;\n\n var max_length = $(input).attr(\"maxlength\");\n if (start == end && end == val.length) {\n if (!max_length || val.length < max_length) {\n input.val(val + key);\n input.change()\n }\n } else {\n //console.log(input_node.type)\n if (input_node.type != \"number\"){\n var new_string = this.insertToString(start, end, val, key);\n input.val(new_string);\n start++;\n end = start;\n input_node.setSelectionRange(start, end);\n input.change()\n }else{\n console.log(\"Not supposed to go there as number types are changed to text type and back\")\n input.val(key + val);\n input.change()\n }\n \n }\n\n input.trigger('focus');\n\n if (shift && !capslock) {\n this.toggleShiftOff();\n }\n },\n\n backspace: function () {\n var input = this.settings.input,\n val = input.val();\n input_node = input.get(0),\n start = input_node.selectionStart,\n end = input_node.selectionEnd;\n \n input.val(val.slice(0, start-1) + val.slice(start))\n input.change()\n input.focus()\n input_node.setSelectionRange(start-1, start-1);\n },\n\n toggleShiftOn: function () {\n var letters = $(this.element).find('.letter'),\n shift_key = $(this.element).find('.shift');\n\n letters.addClass('uppercase');\n shift_key.addClass('active')\n shift = true;\n },\n\n toggleShiftOff: function () {\n var letters = $(this.element).find('.letter'),\n shift_key = $(this.element).find('.shift');\n\n letters.removeClass('uppercase');\n shift_key.removeClass('active');\n shift = false;\n },\n\n toggleLayout: function () {\n layout_id = layout_id || 0;\n var plain_layouts = layouts.selectable;\n layout_id++;\n\n var current_id = layout_id % plain_layouts.length;\n var SelectedLayoutName = plain_layouts[current_id];\n $('#vkeyname').text('V-Keyboard ' + SelectedLayoutName )\n return plain_layouts[current_id];\n },\n\n insertToString: function (start, end, string, insert_string) {\n return string.substring(0, start) + insert_string + string.substring(end, string.length);\n }\n };\n\n /*\n\t\t// A really lightweight plugin wrapper around the constructor,\n\t\t// preventing against multiple instantiations\n\t\t$.fn[pluginName] = function ( options ) {\n\t\t\t\treturn this.each(function() {\n\t\t\t\t\t\tif ( !$.data( this, \"plugin_\" + pluginName ) ) {\n\t\t\t\t\t\t\t\t$.data( this, \"plugin_\" + pluginName, new Plugin( this, options ) );\n\t\t\t\t\t\t}\n\t\t\t\t});\n\t\t};\n */\n var methods = {\n init: function(options) {\n if (!this.data(\"plugin_\" + pluginName)) {\n this.data(\"plugin_\" + pluginName, new Plugin(this, options));\n }\n },\n\t\t\tsetInput: function(content) {\n\t\t\t\tthis.data(\"plugin_\" + pluginName).setInput($(content));\n },\n setLayout: function(layoutname) {\n // change layout if it is not match current\n object = this.data(\"plugin_\" + pluginName);\n if (typeof(layouts[layoutname]) !== 'undefined' && object.settings.layout != layoutname) {\n object.settings.layout = layoutname;\n object.createKeyboard(layoutname);\n object.events();\n };\n },\n };\n\n\t\t$.fn[pluginName] = function (methodOrOptions) {\n if (methods[methodOrOptions]) {\n return methods[methodOrOptions].apply(this.first(), Array.prototype.slice.call( arguments, 1));\n } else if (typeof methodOrOptions === 'object' || ! methodOrOptions) {\n // Default to \"init\"\n return methods.init.apply(this.first(), arguments);\n } else {\n $.error('Method ' + methodOrOptions + ' does not exist on jQuery.tooltip');\n }\n };\n\n})(jQuery, window, document);\n</script>\n<style>\n .jkeyboard {\n display: inline-block;\n}\n.jkeyboard, .jkeyboard .jline, .jkeyboard .jline ul {\n display: block;\n margin: 0;\n padding: 0;\n}\n.jkeyboard .jline {\n text-align: center;\n margin-left: -14px;\n}\n.jkeyboard .jline ul li {\n font-family: arial, sans-serif;\n font-size: 20px;\n display: inline-block;\n border: 1px solid #468db3;\n -webkit-box-shadow: 0 0 3px #468db3;\n -webkit-box-shadow: inset 0 0 3px #468db3;\n margin: 5px 0 1px 6px;\n color: #000000;\n border-radius: 5px;\n width: 52px;\n height: 52px;\n box-sizing: border-box;\n text-align: center;\n line-height: 52px;\n overflow: hidden;\n cursor: pointer;\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -khtml-user-select: none;\n -moz-user-select: -moz-none;\n -ms-user-select: none;\n user-select: none;\n}\n.jkeyboard .jline ul li.uppercase {\n text-transform: uppercase;\n}\n.jkeyboard .jline ul li:hover, .jkeyboard .jline ul li:active {\n background-color: #185a82;\n}\n.jkeyboard .jline .return {\n width: 80px;\n}\n.jkeyboard .jline .space {\n width: 366px;\n}\n.jkeyboard .jline .numeric_switch {\n width: 65px;\n}\n.jkeyboard .jline .layout_switch {\n}\n.jkeyboard .jline .shift {\n width: 60px;\n}\n.jkeyboard .jline .backspace {\n width: 69px;\n}\n</style>\n\n\n\n\n<style>\nbody {font-family: Arial, Helvetica, sans-serif;}\n\n.nr-dashboard-theme .nr-dashboard-template .md-button:not(:first-of-type) {\n margin-top: 0px;\n}\n\n/* The Modal (background) */\n.modal {\n display: none; /* Hidden by default */\n position: fixed; /* Stay in place */\n opacity:0.99;\n z-index: 100; /* Sit on top */\n left: 0;\n top: 0;\n width: 100%; /* Full width */\n height: 100%; /* Full height */\n overflow: auto; /* Enable scroll if needed */\n background-color: rgb(0,0,0); /* Fallback color */\n background-color: rgba(0,0,0,0.4); /* Black w/ opacity */\n}\n\n/* Modal Content */\n.modal-content {\n position: fixed;\n background-color: #fefefe;\n margin: auto;\n padding: 0;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n border: 1px solid #888;\n width: 720px;\n max-width: 100%;\n max-height: 100%;\n box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);\n -webkit-animation-name: animate;\n -webkit-animation-duration: 0.4s;\n animation-name: animate;\n animation-duration: 0.4s\n}\n\n/* Add Animation */\n@-webkit-keyframes animate {\n from {top:100%; opacity:0} \n to {top:50%; opacity:1}\n}\n\n@keyframes animate {\n from {top:100%; opacity:0}\n to {top:50%; opacity:1}\n}\n\n/* The Close Button */\n.close {\n color: black;\n float: right;\n font-size: 28px;\n font-weight: bold;\n}\n\n.close:hover,\n.close:focus {\n color: #000;\n text-decoration: none;\n cursor: pointer;\n}\n\n.modal-header {\n padding: 2px 16px;\n background-color: aliceblue;\n color: white;\n}\n\n.modal-body {padding: 2px 16px;}\n\n.modal-footer {\n padding: 2px 16px;\n background-color: #5cb85c;\n color: white;\n}\n</style>\n\n<!-- The Modal -->\n<div id=\"myModal\" class=\"modal\">\n\n <!-- Modal content -->\n <div class=\"modal-content\">\n <div class=\"modal-header\">\n <span class=\"close\" onclick=\"closeModal()\">&times;</span>\n <h2 id=\"vkeyname\" style=\"background-color: aliceblue !important; color: black !important; text-align: center;\">V-Keyboard</h2>\n </div>\n <div class=\"modal-body\">\n <div id=\"keyboard\"></div>\n <div>\n </div>\n </div>\n </div>\n</div>\n\n\n<script>\n // Get the modal\nvar modal = document.getElementById('myModal');\n\n/*\n$('input[type=text]').click(function () {\n $('#keyboard').unbind().removeData();\n $('#keyboard').jkeyboard({\n layout: \"english\",\n input: $('#'+$(this).attr('id'))\n });\n});\n\n$('input[type=number]').click(function () {\n $('#keyboard').unbind().removeData();\n $('#keyboard').jkeyboard({\n layout: \"numbers_only\",\n input: $('#'+$(this).attr('id'))\n });\n});\n*/\n\nvar inputTags;\nvar inputType;\n\nvar getinputs = function() {\n inputTags = document.getElementsByTagName(\"input\");\n for (var i = 0; i < inputTags.length; i++) {\n inputTags[i].addEventListener('click', openModal, false)\n }\n}\n\nsetTimeout(function(){ getinputs(); }, 1000);\n\nvar inputTarget;\n\nvar openModal = function() {\n inputType = event.target.type\n inputTarget = event.target\n var layoutName;\n if (inputType == \"number\"){\n //console.log(event.target)\n inputTarget.type = \"text\" //hack because chrome doesn't allow setselection in number inputs\n layoutName = \"numbers_only\"\n }else{\n layoutName = \"english\"\n }\n $('#keyboard').unbind().removeData();\n modal.style.display = \"block\";\n $('#keyboard').jkeyboard({\n layout: layoutName,\n input: $('#'+$(this).attr('id'))\n });\n}\n\n\n// Get the <span> element that closes the modal\nvar span = document.getElementsByClassName(\"close\")[0];\n\n// When the user clicks on <span> (x), close the modal\n//span.onclick = function(event) {\n //closeModal()\n//}\n\n// When the user clicks anywhere outside of the modal, close it\nwindow.onclick = function(event) {\n var source = event.target;\n if (source == modal || source == span) {\n closeModal(source)\n }\n};\n\nvar closeModal = function(source){\n //console.log(\"closing\")\n modal.style.display = \"none\";\n \n if (inputType == \"number\"){\n inputTarget.type = \"number\" //hack because chrome doesn't allow selectionstart on number inputs\n }\n}\n\n</script>\n<script>\n\nvar clickState = 1;\nvar btn = document.querySelector('.VK');\n\nbtn.addEventListener('click', function(){\n\n if (clickState == 0) {\n this.textContent = 'V-KeyBoard On';\n modal = document.getElementById('myModal');\n clickState = 1;\n } else {\n this.textContent = 'V-KeyBoard Off';\n modal = document.getElementById('empty');\n clickState = 0;\n }\n\n});\n</script>\n\n<style>\n.VK{\n position: fixed;\n top: 60px;\n right: 20px;\n height: 30px;\n}\n</style>\n\n<div id=\"empty\"></div>\n<button class=\"VK\">V-KeyBoard On</button> \n\n\n",
        "storeOutMessages": false,
        "fwdInMessages": false,
        "templateScope": "local",
        "x": 420,
        "y": 560,
        "wires": [
            []
        ]
    },
    {
        "id": "e26fbcc4.5a681",
        "type": "ui_text_input",
        "z": "1f6b105a.a3f8d",
        "name": "",
        "label": "Username",
        "group": "6a4d510d.5de65",
        "order": 3,
        "width": 0,
        "height": 0,
        "passthru": true,
        "mode": "text",
        "delay": 300,
        "topic": "",
        "x": 350,
        "y": 420,
        "wires": [
            [
                "45aa8956.0aacf8"
            ]
        ]
    },
    {
        "id": "3951049.3fad1fc",
        "type": "ui_text_input",
        "z": "1f6b105a.a3f8d",
        "name": "",
        "label": "Password",
        "tooltip": "",
        "group": "6a4d510d.5de65",
        "order": 4,
        "width": 0,
        "height": 0,
        "passthru": true,
        "mode": "password",
        "delay": 300,
        "topic": "",
        "x": 340,
        "y": 460,
        "wires": [
            [
                "b973810a.e5c0f"
            ]
        ]
    },
    {
        "id": "8d9bf302.0cf35",
        "type": "ui_template",
        "z": "1f6b105a.a3f8d",
        "group": "6a4d510d.5de65",
        "name": "Number",
        "order": 2,
        "width": 0,
        "height": 0,
        "format": "<input id=\"WhitoutOneIfFails\" type=\"number\" ng-model=\"msg.payload\" ng-change=\"send(msg)\" name=\"usrname\" placeholder=\"Quantity\">",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "templateScope": "local",
        "x": 340,
        "y": 500,
        "wires": [
            [
                "d6950ee5.5763b"
            ]
        ]
    },
    {
        "id": "d6950ee5.5763b",
        "type": "debug",
        "z": "1f6b105a.a3f8d",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "x": 490,
        "y": 500,
        "wires": []
    },
    {
        "id": "6a4d510d.5de65",
        "type": "ui_group",
        "z": "",
        "name": "Users",
        "tab": "56715436.c2591c",
        "order": 2,
        "disp": true,
        "width": "9",
        "collapse": false
    },
    {
        "id": "56715436.c2591c",
        "type": "ui_tab",
        "z": "",
        "name": "Home Tab",
        "icon": "dashboard",
        "order": 3
    }
]

```

---

<div class="post-metadata">

**Author:** ![sachin](https://avatars.discourse-cdn.com/v4/letter/s/c77e96/32.png) [@sachin](https://discourse.nodered.org/u/sachin)\
**Post date:** [5 April 2019 12:30 UTC](https://discourse.nodered.org/t/button-on-click-popup-number-pad/9802/6 "2019-04-05T12:30:31Z")

</div>

after some edit it looks like this  
plz find the attachment ![Capture2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/2/23d63f7684fa4c659ccd8b18a1a2fb203dd409f8.png) ![Capture3](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/8/89daa3a1bf689c6821da1ce500a7951d365b54a6.png)

---

<div class="post-metadata">

**Author:** ![sachin](https://avatars.discourse-cdn.com/v4/letter/s/c77e96/32.png) [@sachin](https://discourse.nodered.org/u/sachin)\
**Post date:** [5 April 2019 12:33 UTC](https://discourse.nodered.org/t/button-on-click-popup-number-pad/9802/7 "2019-04-05T12:33:20Z")

</div>

i need button instead of text editor and each number with different color and button color should change based on the number key pad color

---

<div class="post-metadata">

**Author:** ![ukmoose](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ukmoose/32/13_2.png) [@ukmoose](https://discourse.nodered.org/u/ukmoose)\
**Post date:** [5 April 2019 12:52 UTC](https://discourse.nodered.org/t/button-on-click-popup-number-pad/9802/8 "2019-04-05T12:52:35Z")

</div>

Then you will need to edit the javascript in the virtual keyboard template node. Theres isn't an option that will enable what you want to achieve

---

<div class="post-metadata">

**Author:** ![sachin](https://avatars.discourse-cdn.com/v4/letter/s/c77e96/32.png) [@sachin](https://discourse.nodered.org/u/sachin)\
**Post date:** [5 April 2019 12:55 UTC](https://discourse.nodered.org/t/button-on-click-popup-number-pad/9802/9 "2019-04-05T12:55:06Z")

</div>

i tried but am able to do it...

---

<div class="post-metadata">

**Author:** ![binitafelicity](https://avatars.discourse-cdn.com/v4/letter/b/8491ac/32.png) [@binitafelicity](https://discourse.nodered.org/u/binitafelicity)\
**Post date:** [30 June 2022 06:17 UTC](https://discourse.nodered.org/t/button-on-click-popup-number-pad/9802/10 "2022-06-30T06:17:00Z")

</div>

\*number pad should pop up on click a button and button color should change based on the \*number pad color. This [click test](https://www.cps-tester.co/) keypad should be located next to the form field as a link. The keypad should be preferably Javascript/AJAX. Also the keypad routine should have a close ... Just call numpad() on any jQuery object to make a keypad _pop up_ every time that object is _clicked_. Use numpad('open') to open the numpad ...