Hi @radjesth !
The latest code is hosted there: https://flows.nodered.org/flow/7fb5bc5ae66e6bc1b1c1b8e800bdef51
It should be centered. Let me know if that works for you! Otherwise if I understand you, the keypad is centered horizontally but not vertically?
1 Like
Dear Hugo,
Thank you for your reply.
I have another challenge.
I am using the numeric keypad.
As soon as you press a key, you can see the number in the upper place of the keypad.
I want it to change into a * after 500ms.
So, as soon as you press a number, it will show the number and then change into a *.
I don't know where to begin.
I have managed to change the font size and I have added a return key, but this is not my cup of tea.
Your help would be appreciated.
Kind regards
I am trying to use the latest virtual keyboard to feed a text input box. I notice that as I touch the buttons in virtual keyboard the individual letters are being sent from the text input node and not waiting for the close box. The text input has a delay setting 0 which waits for an enter key to send the payload. This works as it should using the keyboard. Here is the sequence of events when pressing 123 and then pressing the close box on the virtual keyboard:
press 1
msg.payload = ''
press 2
msg.payload = "1"
press 3
msg.payload = "12"
press close box (x)
msg.payload = "123"
I can live with this for data entry because it just overwrites, but I have some inputs that trigger an action when you press the enter key. Any suggestions on how to change the code to fix this?
Thanks,
Tom
Hi @hugobox
Thanks for sharing this, I was actually looking for something like this.
1 Like
I am seeing this behaviour too. Not sure where/what is causing it. In my case, I enter a qty of something (eggs layed if you must ask 
) but the message is passed as described here. Entering 20 sends 2 then 0. I'll report back if I find what causes this.
Hi @tcr000 and @mfassier
Happy new year, sorry for the long time for my reply!
Please send a flow example so I can reproduce, when I try a number box with delay 0, I don't see the behavior you describe.
And to you as well 
So, here's my own example:
[{"id":"847f16e5b7c12bb9","type":"ui_text_input","z":"37c4a78b.9bf6e8","g":"2a8db2e10507b90d","name":"","label":"How many eggs today ?","tooltip":"","group":"679c47a.1cd7bb8","order":1,"width":4,"height":1,"passthru":false,"mode":"number","delay":"0","topic":"","topicType":"str","x":270,"y":1100,"wires":[["14b71129b0b10894"]]},{"id":"5a61f62ffd9a2e8b","type":"ui_template","z":"37c4a78b.9bf6e8","g":"2a8db2e10507b90d","group":"679c47a.1cd7bb8","name":"Virtual Keyboard","order":2,"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 ['backspace', '0', 'return'],\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 $('#vkeyname').text(val + key)\n }\n } else {\n if (input_node.type == \"text\"){\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 }else{\n input.val(val + key);\n }\n input.change()\n $('#vkeyname').text(val + key)\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 if (input.type == \"text\"){\n input.val(val.slice(0, start-1) + val.slice(start))\n input_node.setSelectionRange(start-1, start-1);\n console.log(val)\n $('#vkeyname').text(val)\n }else{\n input.val(val.slice(0,-1))\n $('#vkeyname').text(val.slice(0,-1))\n }\n input.change()\n input.focus()\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 bottom: 0%;\n left: 50%;\n transform: translate(-50%, 0%);\n border: 1px solid #888;\n width: fit-content;\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 {bottom:100%; opacity:0} \n to {bottom:0%; opacity:1}\n}\n\n@keyframes animate {\n from {bottom:100%; opacity:0}\n to {bottom:0%; 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()\">×</span>\n <h2 id=\"vkeyname\" style=\"background-color: aliceblue !important; color: black !important; text-align: center; min-height: 30px;\">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 console.log(inputTags)\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 //inputTarget.type = \"number\" //hack because chrome doesn't allow setselection in number inputs\n //inputTarget.value = \"\"\n layoutName = \"numbers_only\"\n }else{\n layoutName = \"english\"\n }\n $('#vkeyname').text(event.target.value)\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> ","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","x":260,"y":1160,"wires":[[]]},{"id":"14b71129b0b10894","type":"debug","z":"37c4a78b.9bf6e8","g":"2a8db2e10507b90d","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":490,"y":1160,"wires":[]},{"id":"679c47a.1cd7bb8","type":"ui_group","name":"Egg Count","tab":"e9a5a1f6.5b716","order":3,"disp":true,"width":4,"collapse":false},{"id":"e9a5a1f6.5b716","type":"ui_tab","name":"Chicken Coop","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
Now, on this, when I click the field, the vkeyboard shows up and then I type 1, 2, 3, enter. The output is
That's not the desired outcome, as the input node should wait to have the full "123" message and wait for the "enter" to pass it along. To be clear, this may be an input node issue, but the odd thing is that this used to work in a not so distant past, say 6 or 8 months ago. I can't pinpoint a change that would explain it.
Hope this helps.
1 Like
Hi @mfassier ! Here's a quick modification of the vKeyboard script that should only send numbers after a "return" click. Let me know if it works well for you!
<script>
// the semi-colon before function invocation is a safety net against concatenated
// scripts and/or other plugins which may not be closed properly.
; (function ($, window, document, undefined) {
// undefined is used here as the undefined global variable in ECMAScript 3 is
// mutable (ie. it can be changed by someone else). undefined isn't really being
// passed in so we can ensure the value of it is truly undefined. In ES5, undefined
// can no longer be modified.
// window and document are passed through as local variable rather than global
// as this (slightly) quickens the resolution process and can be more efficiently
// minified (especially when both are regularly referenced in your plugin).
// Create the defaults once
var pluginName = "jkeyboard",
defaults = {
layout: "english",
input: $('#input'),
customLayouts: {
selectable: []
},
};
var function_keys = {
backspace: {
text: 'DEL',
},
return: {
text: 'Enter'
},
shift: {
text: 'Shift'
},
space: {
text: 'Space'
},
numeric_switch: {
text: '123',
command: function () {
this.createKeyboard('numeric');
this.events();
}
},
layout_switch: {
text: '<i class="fa fa-keyboard-o" aria-hidden="true"></i>',
command: function () {
var l = this.toggleLayout();
this.createKeyboard(l);
this.events();
}
},
character_switch: {
text: 'ABC',
command: function () {
this.createKeyboard(layout);
this.events();
}
},
symbol_switch: {
text: '#+=',
command: function () {
this.createKeyboard('symbolic');
this.events();
}
}
};
var layouts = {
selectable: ['azeri', 'english', 'russian','french', 'emoji'],
azeri: [
['q', 'ü', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p', 'ö', 'ğ'],
['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', 'ı', 'ə'],
['shift', 'z', 'x', 'c', 'v', 'b', 'n', 'm', 'ç', 'ş', 'backspace'],
['numeric_switch', 'layout_switch', 'space', 'return']
],
english: [
['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p',],
['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l',],
['shift', 'z', 'x', 'c', 'v', 'b', 'n', 'm', 'backspace'],
['numeric_switch', 'layout_switch', 'space', 'return']
],
russian: [
['й', 'ц', 'у', 'к', 'е', 'н', 'г', 'ш', 'щ', 'з', 'х'],
['ф', 'ы', 'в', 'а', 'п', 'р', 'о', 'л', 'д', 'ж', 'э'],
['shift', 'я', 'ч', 'с', 'м', 'и', 'т', 'ь', 'б', 'ю', 'backspace'],
['numeric_switch', 'layout_switch', 'space', 'return']
],
french: [
['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p',],
['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l','à','ç'],
['shift', 'z', 'x', 'c', 'v', 'b', 'n', 'm','é','è', 'backspace'],
['numeric_switch', 'layout_switch', 'space', 'return']
],
emoji: [
['😀', '😁', '😂', '🤣', '😃', '😄', '😅', '😆', '😉', '😊',],
['😋', '😎', '😍', '😘', 'g', 'h', 'j', 'k', 'l','à','ç'],
['shift', 'z', 'x', 'c', 'v', 'b', 'n', 'm','é','è', 'backspace'],
['numeric_switch', 'layout_switch', 'space', 'return']
],
numeric: [
['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
['-', '/', ':', ';', '(', ')', '$', '&', '@', '"'],
['symbol_switch', '.', ',', '?', '!', "'", 'backspace'],
['character_switch', 'layout_switch', 'space', 'return'],
],
numbers_only: [
['1', '2', '3',],
['4', '5', '6',],
['7', '8', '9',],
['0', 'backspace', 'return'],
],
symbolic: [
['[', ']', '{', '}', '#', '%', '^', '*', '+', '='],
['_', '\\', '|', '~', '<', '>'],
['numeric_switch', '.', ',', '?', '!', "'", 'backspace'],
['character_switch', 'layout_switch', 'space', 'return'],
]
}
var shift = false, capslock = false, layout = 'english', layout_id = 0;
// The actual plugin constructor
function Plugin(element, options) {
this.element = element;
// jQuery has an extend method which merges the contents of two or
// more objects, storing the result in the first object. The first object
// is generally empty as we don't want to alter the default options for
// future instances of the plugin
this.settings = $.extend({}, defaults, options);
// Extend & Merge the cusom layouts
layouts = $.extend(true, {}, this.settings.customLayouts, layouts);
if (Array.isArray(this.settings.customLayouts.selectable)) {
$.merge(layouts.selectable, this.settings.customLayouts.selectable);
}
this._defaults = defaults;
this._name = pluginName;
this.init();
}
Plugin.prototype = {
init: function () {
layout = this.settings.layout;
this.createKeyboard(layout);
this.events();
},
setInput: function (newInputField) {
this.settings.input = newInputField;
},
createKeyboard: function (layout) {
shift = false;
capslock = false;
var keyboard_container = $('<ul/>').addClass('jkeyboard'),
me = this;
layouts[layout].forEach(function (line, index) {
var line_container = $('<li/>').addClass('jline');
line_container.append(me.createLine(line));
keyboard_container.append(line_container);
});
$(this.element).html('').append(keyboard_container);
},
createLine: function (line) {
var line_container = $('<ul/>');
line.forEach(function (key, index) {
var key_container = $('<li/>').addClass('jkey').data('command', key);
if (function_keys[key]) {
key_container.addClass(key).html(function_keys[key].text);
}
else {
key_container.addClass('letter').html(key);
}
line_container.append(key_container);
})
return line_container;
},
events: function () {
var letters = $(this.element).find('.letter'),
shift_key = $(this.element).find('.shift'),
space_key = $(this.element).find('.space'),
backspace_key = $(this.element).find('.backspace'),
return_key = $(this.element).find('.return'),
me = this,
fkeys = Object.keys(function_keys).map(function (k) {
return '.' + k;
}).join(',');
letters.on('click', function () {
me.type((shift || capslock) ? $(this).text().toUpperCase() : $(this).text());
});
space_key.on('click', function () {
me.type(' ');
});
return_key.on('click', function () {
me.enter();
});
backspace_key.on('click', function () {
me.backspace();
});
shift_key.on('click', function () {
if (capslock) {
me.toggleShiftOff();
capslock = false;
} else {
me.toggleShiftOn();
}
}).on('dblclick', function () {
capslock = true;
});
$(fkeys).on('click', function () {
var command = function_keys[$(this).data('command')].command;
if (!command) return;
command.call(me);
});
},
type: function (key) {
var input = this.settings.input,
val = input.val(),
input_node = input.get(0),
start = input_node.selectionStart,
end = input_node.selectionEnd;
var max_length = $(input).attr("maxlength");
if (start == end && end == val.length) {
if (!max_length || val.length < max_length) {
input.val(val + key);
input.change()
$('#vkeyname').text(val + key)
}
} else {
if (input_node.type == "text"){
var new_string = this.insertToString(start, end, val, key);
input.val(new_string);
start++;
end = start;
input_node.setSelectionRange(start, end);
input.change()
}else if (input_node.type == "number"){
input.val(val + key);
}else{
input.val(val + key);
input.change()
}
$('#vkeyname').text(val + key)
}
input.trigger('focus');
if (shift && !capslock) {
this.toggleShiftOff();
}
},
enter: function () {
var input = this.settings.input,
val = input.val();
input_node = input.get(0),
start = input_node.selectionStart,
end = input_node.selectionEnd;
if (input.type == "text"){
val = val + "\n";
$('#vkeyname').text(val)
}
input.change()
input.focus()
},
backspace: function () {
var input = this.settings.input,
val = input.val();
input_node = input.get(0),
start = input_node.selectionStart,
end = input_node.selectionEnd;
if (input.type == "text"){
input.val(val.slice(0, start-1) + val.slice(start))
input_node.setSelectionRange(start-1, start-1);
//console.log(val)
$('#vkeyname').text(val)
}else{
input.val(val.slice(0,-1))
$('#vkeyname').text(val.slice(0,-1))
}
input.change()
//input.focus()
},
toggleShiftOn: function () {
var letters = $(this.element).find('.letter'),
shift_key = $(this.element).find('.shift');
letters.addClass('uppercase');
shift_key.addClass('active')
shift = true;
},
toggleShiftOff: function () {
var letters = $(this.element).find('.letter'),
shift_key = $(this.element).find('.shift');
letters.removeClass('uppercase');
shift_key.removeClass('active');
shift = false;
},
toggleLayout: function () {
layout_id = layout_id || 0;
var plain_layouts = layouts.selectable;
layout_id++;
var current_id = layout_id % plain_layouts.length;
var SelectedLayoutName = plain_layouts[current_id];
$('#vkeyname').text('V-Keyboard ' + SelectedLayoutName )
return plain_layouts[current_id];
},
insertToString: function (start, end, string, insert_string) {
return string.substring(0, start) + insert_string + string.substring(end, string.length);
}
};
/*
// A really lightweight plugin wrapper around the constructor,
// preventing against multiple instantiations
$.fn[ pluginName ] = function ( options ) {
return this.each(function() {
if ( !$.data( this, "plugin_" + pluginName ) ) {
$.data( this, "plugin_" + pluginName, new Plugin( this, options ) );
}
});
};
*/
var methods = {
init: function(options) {
if (!this.data("plugin_" + pluginName)) {
this.data("plugin_" + pluginName, new Plugin(this, options));
}
},
setInput: function(content) {
this.data("plugin_" + pluginName).setInput($(content));
},
setLayout: function(layoutname) {
// change layout if it is not match current
object = this.data("plugin_" + pluginName);
if (typeof(layouts[layoutname]) !== 'undefined' && object.settings.layout != layoutname) {
object.settings.layout = layoutname;
object.createKeyboard(layoutname);
object.events();
};
},
};
$.fn[pluginName] = function (methodOrOptions) {
if (methods[methodOrOptions]) {
return methods[methodOrOptions].apply(this.first(), Array.prototype.slice.call( arguments, 1));
} else if (typeof methodOrOptions === 'object' || ! methodOrOptions) {
// Default to "init"
return methods.init.apply(this.first(), arguments);
} else {
$.error('Method ' + methodOrOptions + ' does not exist on jQuery.tooltip');
}
};
})(jQuery, window, document);
</script>
<style>
.jkeyboard {
display: inline-block;
}
.jkeyboard, .jkeyboard .jline, .jkeyboard .jline ul {
display: block;
margin: 0;
padding: 0;
}
.jkeyboard .jline {
text-align: center;
margin-left: -14px;
}
.jkeyboard .jline ul li {
font-family: arial, sans-serif;
font-size: 20px;
display: inline-block;
border: 1px solid #468db3;
-webkit-box-shadow: 0 0 3px #468db3;
-webkit-box-shadow: inset 0 0 3px #468db3;
margin: 5px 0 1px 6px;
color: #000000;
border-radius: 5px;
width: 52px;
height: 52px;
box-sizing: border-box;
text-align: center;
line-height: 52px;
overflow: hidden;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none;
}
.jkeyboard .jline ul li.uppercase {
text-transform: uppercase;
}
.jkeyboard .jline ul li:hover, .jkeyboard .jline ul li:active {
background-color: #185a82;
}
.jkeyboard .jline .return {
width: 80px;
}
.jkeyboard .jline .space {
width: 366px;
}
.jkeyboard .jline .numeric_switch {
width: 65px;
}
.jkeyboard .jline .layout_switch {
}
.jkeyboard .jline .shift {
width: 60px;
}
.jkeyboard .jline .backspace {
width: 69px;
}
</style>
<style>
body {font-family: Arial, Helvetica, sans-serif;}
.nr-dashboard-theme .nr-dashboard-template .md-button:not(:first-of-type) {
margin-top: 0px;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
opacity:0.99;
z-index: 100; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
position: fixed;
background-color: #fefefe;
margin: auto;
padding: 0;
bottom: 0%;
left: 50%;
transform: translate(-50%, 0%);
border: 1px solid #888;
width: fit-content;
max-width: 100%;
max-height: 100%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animate;
-webkit-animation-duration: 0.4s;
animation-name: animate;
animation-duration: 0.4s
}
/* Add Animation */
@-webkit-keyframes animate {
from {bottom:100%; opacity:0}
to {bottom:0%; opacity:1}
}
@keyframes animate {
from {bottom:100%; opacity:0}
to {bottom:0%; opacity:1}
}
/* The Close Button */
.close {
color: black;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: aliceblue;
color: white;
}
.modal-body {padding: 2px 16px;}
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
</style>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close" onclick="closeModal()">×</span>
<h2 id="vkeyname" style="background-color: aliceblue !important; color: black !important; text-align: center; min-height: 30px;">V-Keyboard</h2>
</div>
<div class="modal-body">
<div id="keyboard"></div>
<div>
</div>
</div>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
/*
$('input[type=text]').click(function () {
$('#keyboard').unbind().removeData();
$('#keyboard').jkeyboard({
layout: "english",
input: $('#'+$(this).attr('id'))
});
});
$('input[type=number]').click(function () {
$('#keyboard').unbind().removeData();
$('#keyboard').jkeyboard({
layout: "numbers_only",
input: $('#'+$(this).attr('id'))
});
});
*/
var inputTags;
var inputType;
var getinputs = function() {
inputTags = document.getElementsByTagName("input");
console.log(inputTags)
for (var i = 0; i < inputTags.length; i++) {
inputTags[i].addEventListener('click', openModal, false)
}
}
setTimeout(function(){ getinputs(); }, 1000);
var inputTarget;
var openModal = function() {
inputType = event.target.type
inputTarget = event.target
var layoutName;
if (inputType == "number"){
//inputTarget.type = "number" //hack because chrome doesn't allow setselection in number inputs
//inputTarget.value = ""
layoutName = "numbers_only"
}else{
layoutName = "english"
}
$('#vkeyname').text(event.target.value)
$('#keyboard').unbind().removeData();
modal.style.display = "block";
$('#keyboard').jkeyboard({
layout: layoutName,
input: $('#'+$(this).attr('id'))
});
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
//span.onclick = function(event) {
//closeModal()
//}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
var source = event.target;
if (source == modal || source == span) {
closeModal(source)
}
};
var closeModal = function(source){
//console.log("closing")
modal.style.display = "none";
if (inputType == "number"){
inputTarget.type = "number" //hack because chrome doesn't allow selectionstart on number inputs
}
}
</script>
<script>
var clickState = 1;
var btn = document.querySelector('.VK');
btn.addEventListener('click', function(){
if (clickState == 0) {
this.textContent = 'V-KeyBoard On';
modal = document.getElementById('myModal');
clickState = 1;
} else {
this.textContent = 'V-KeyBoard Off';
modal = document.getElementById('empty');
clickState = 0;
}
});
</script>
<style>
.VK{
position: fixed;
top: 60px;
right: 20px;
height: 30px;
}
</style>
<div id="empty"></div>
<button class="VK">V-KeyBoard On</button>
2 Likes
@hugobox , big thanks for that. It did fix it and my solution now works again. Thanks for your help and good job!
1 Like
