is it possible todisplay a virtual keyboard in any textfields ?
@hathemi - please don't post a question in one thread and then open a new thread with the same question, you won't get an answer any faster and it might cause people to ignore you...
1 Like
In the case that you want to prompt the forum in case there is someone who can help who maybe was too busy at the time and then forgot about you then the thing to do is to add another post to the first one, after waiting at least a couple of days. There is no need to do that now of course for this thread.
If no-one replies after that then it is most likely that no-one here knows the answer.
1 Like
Hi @hathemi
Here's a virtual keyboard based on https://github.com/javidan/jkeyboard
[
{
"id": "2719d4b8.7ae56c",
"type": "ui_template",
"z": "1f6b105a.a3f8d",
"group": "5630af15.e02d5",
"name": "Virtual Keyboard",
"order": 0,
"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: 'ALT',\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'],\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 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 }\n } else {\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 }\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\n input.val(val.substr(0, val.length - 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 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: 10px 0 1px 14px;\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: 120px;\n}\n.jkeyboard .jline .space {\n width: 456px;\n}\n.jkeyboard .jline .numeric_switch {\n width: 84px;\n}\n.jkeyboard .jline .layout_switch {\n}\n.jkeyboard .jline .shift {\n width: 100px;\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 padding-top: 500px; /* Location of the box */\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: relative;\n background-color: #fefefe;\n margin: auto;\n padding: 0;\n border: 1px solid #888;\n width: 80%;\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: animatetop;\n -webkit-animation-duration: 0.4s;\n animation-name: animatetop;\n animation-duration: 0.4s\n}\n\n/* Add Animation */\n@-webkit-keyframes animatetop {\n from {top:-300px; opacity:0} \n to {top:0; opacity:1}\n}\n\n@keyframes animatetop {\n from {top:-300px; opacity:0}\n to {top: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<!-- Trigger/Open The Modal -->\n<div ng-init=\"msg.payload = ''\">\nUsername:\n<input type=\"text\" ng-model=\"msg.payload\" id=\"search_field\">\n<md-button ng-click=\"output(msg); msg.payload =''\">OK</md-button>\n</div>\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\">×</span>\n <h2 style=\"background-color: aliceblue !important;text-align: center;\">Virtual 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// Get the fields that opens the modal\nvar txt1 = document.getElementById(\"search_field\");\n\n// Get the <span> element that closes the modal\nvar span = document.getElementsByClassName(\"close\")[0];\n\n// When the user clicks on the button, open the modal \ntxt1.onfocus = function() {\n modal.style.display = \"block\";\n}\n\n// When the user clicks on <span> (x), close the modal\nspan.onclick = function() {\n modal.style.display = \"none\";\n}\n\n// When the user clicks anywhere outside of the modal, close it\nwindow.onclick = function(event) {\n if (event.target == modal) {\n modal.style.display = \"none\";\n }\n}\n</script>\n\n<script>\n$('#keyboard').jkeyboard({\n layout: \"english\",\n input: $('#search_field')\n});\n\n(function($scope) {\n \n $scope.msg = {\"payload\":\"\",\"topic\":\"\"}\n \n $scope.output = function(msg){\n $scope.msg.payload = $('#search_field').val()\n $scope.send(msg)\n $scope.msg.payload = \"\"\n $('#search_field').val(\"\")\n }\n \n})(scope);\n</script>\n\n",
"storeOutMessages": false,
"fwdInMessages": false,
"templateScope": "local",
"x": 470,
"y": 560,
"wires": [
[
"8e744530.034048"
]
]
},
{
"id": "8e744530.034048",
"type": "debug",
"z": "1f6b105a.a3f8d",
"name": "",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "payload",
"x": 650,
"y": 560,
"wires": []
},
{
"id": "11ff8571.523bcb",
"type": "inject",
"z": "1f6b105a.a3f8d",
"name": "",
"topic": "",
"payload": "",
"payloadType": "str",
"repeat": "",
"crontab": "",
"once": true,
"onceDelay": 0.1,
"x": 290,
"y": 560,
"wires": [
[
"2719d4b8.7ae56c"
]
]
},
{
"id": "5630af15.e02d5",
"type": "ui_group",
"z": "",
"name": "Users",
"tab": "40ede3c0.21bcfc",
"order": 2,
"disp": true,
"width": "9",
"collapse": false
},
{
"id": "40ede3c0.21bcfc",
"type": "ui_tab",
"z": "",
"name": "Home Tab",
"icon": "dashboard",
"order": 3
}
]
3 Likes
thank you very much. it works
your exemple works perfectly. But, my problem now is i have more then five inputs in my form. i have tried like this but the value of payload object is always undefined. i got nothing in output.
<div ng-init="msg.payload.data3 = ''">
Username:
<input type="text" ng-model="msg.payload.data3" id="search_field">
<md-button ng-click="output_username(msg); msg.payload.data3 =''">OK</md-button>
</div>
<div ng-init="msg.payload.data4 = ''">
address:
<input type="text" ng-model="msg.payload.data4" id="search_field">
<md-button ng-click="output_address(msg); msg.payload.data4 =''">OK</md-button>
</div>
<script>
$('#keyboard').jkeyboard({
layout: "english",
input: $('#search_field')
});
(function($scope) {
$scope.msg = {"payload.data3":"","topic":""}
$scope.output = function(msg){
$scope.msg.payload.data3 = $('#search_field').val()
$scope.send(msg)
$scope.msg.payload.data3 = ""
$('#search_field').val("")
}
})(scope);
</script>I'll try to find time to make it better with multiple fields but not today. Maybe try to inject a msg with the right structure to initialize it?
1 Like
i have found as way by replacing msg.payload.data3 with msg.username ... i don't know if it is the best solution, but it did the job
1 Like
I modified it so now it works with any node-red-dashboard's text-input nodes. I also started adding some custom keyboards like french and emoji but not completed
https://flows.nodered.org/flow/7fb5bc5ae66e6bc1b1c1b8e800bdef51
2 Likes
Nice job 
Thank you very much.
i found a problem, when i change keyboard to numbers, or other language, and try to put more then one, the keyboard return to it initial state... it only take the first hit.
I updated the above flow by changing:
$('input').focus(function () {
for:
$('input').click(function () {
1 Like
is there a way to use this plugin keyboard in two different templates.
i tried to put the same code in other template but it doesn't work. my dashboard is devided in two tabs.
I tried it in two different tabs last week and it seemed to be working. What is happening? Could you share a flow so I could debug?
Hi, i have found a solution for the keybord inside two different template. thanks anyway.
now i have another problem i have an input search. when i start typing on VK, it doesn't affect the search, in advance, when i type with my keyboard, it take the values ogf input and affect the search
<form>
<span class="input-group">
<input type="text" id="search_files" name="search_files" placeholder="Recherche" ng-model="search">
<div>{{search}}</div>
<i class="fa fa-search"></i>
</span>
</form>
<div class="container" ng-app="sortApp">
<table>
<thead>
<tr style="width:100%">
<td>
<a href="#" ng-click="sortType = 'filename'; sortReverse = !sortReverse">
Nom de fichier
<span ng-show="sortType == 'filename' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'filename' && sortReverse" class="fa fa-caret-up"></span>
</a>
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="file in msg.payload | orderBy:sortType:sortReverse| filter:search track by $index" style="width:100%" flex>
<td><a href onclick="" id="{{file}}">{{file}}</a>
</td>
</tr>
</tbody>
</table>
</div>
<div id="myModal-keyboard-archive" class="modal-keyboard-archive">
<!-- Modal content keyboard -->
<div class="modal-content-keyboard-archive">
<div class="modal-header-keyboard-archive">
<span class="close-keyboard-archive">×</span>
<h2 style="background-color: aliceblue !important;text-align: center;">Keyboard</h2>
</div>
<div class="modal-body-keyboard-archive">
<div id="keyboard-archive"></div>
<div>
</div>
</div>
</div>
</div>
<script>
// Get the modal keyboardvar modal_keyboard_archive = document.getElementById('myModal-keyboard-archive');
var classname = document.getElementsByClassName("input");
$('input').focus(function () {
$('#keyboard-archive').unbind().removeData();
$('#keyboard-archive').jkeyboardarch({ layout: "english", input: $('#'+$(this).attr('id')) });});
var openModal = function (){
modal_keyboard_archive.style.display = "block";};
for (var i=0; i < classname.length; i++){
classname[i].addEventListener('click', openModal, false);
}
// Get the fields that opens the modal keyboard
var txt_searchs = document.getElementById("search_files");
// Get the <span> element that closes the modal keyboard
var span_keyboard_archive = document.getElementsByClassName("close-keyboard-archive")[0];
// When the user clicks on the button, open the modal keyboard
txt_searchs.onfocus = function() {
modal_keyboard_archive.style.display = "block";}
// When the user clicks on <span> (x), close the modal keyboard
span_keyboard_archive.onclick = function() {
modal_keyboard_archive.style.display = "none";}
// When the user clicks anywhere outside of the modal keyboard , close it
window.onclick = function(event) {
if (event.target == modal_keyboard) { modal_keyboard_archive.style.display = "none"; }}
(function($scope) {
$scope.search = {"search":""} $scope.search = $('#search_files').val() $scope.send(search)})(scope);
</script>
</div>
what am'i missing here . and thank you
Please read this post on formatting code samples: How to share code or flow json
You've used a blockquote section which doesn't preserve the formatting properly.
1 Like
Without seeing the whole flow its hard to guess what is happening, do you have errors in your browser console?
1 Like
Also try changing
$('input').focus(function () {
for
$('input').click(function () {
like I suggested before.
here's an exemple that can explain my issue. try type with VK an your keybord then you will see what i mean
// 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 = "jkeyboardarch",
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: 'ALT',
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'],
azeri: [
['q', 'ü', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p', 'ö', 'g'],
['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', 'i', '?'],
['shift', 'z', 'x', 'c', 'v', 'b', 'n', 'm', 'ç', 's', 'backspace'],
['numeric_switch', 'layout_switch', 'space', 'return']
],
english: [
['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p',],
['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l',],
[ '.', ',', 'z', 'x', 'c', 'v', 'b', 'n', 'm', 'backspace'],
['-', '/', ':', ';','_', '\\', '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', 'return', 'backspace'],
],
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('jkeyboardarch'),
me = this;
layouts[layout].forEach(function (line, index) {
var line_container = $('<li/>').addClass('jlinearch');
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.type("\n");
// me.settings.input.parents('form').submit();
var modal_keyboard_archive = document.getElementById('myModal-keyboard-archive');
modal_keyboard_archive.style.display = "none";
});
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);
}
} else {
var new_string = this.insertToString(start, end, val, key);
input.val(new_string);
start++;
end = start;
input_node.setSelectionRange(start, end);
}
input.trigger('focus');
if (shift && !capslock) {
this.toggleShiftOff();
}
},
backspace: function () {
var input = this.settings.input,
val = input.val();
input.val(val.substr(0, val.length - 1));
},
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;
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>
.jkeyboardarch {
display: inline-block;
}
.jkeyboardarch, .jkeyboardarch .jlinearch, .jkeyboardarch .jlinearch ul {
display: block;
margin: 0;
padding: 0;
}
.jkeyboardarch .jlinearch {
text-align: center;
margin-left: -14px;
}
.jkeyboardarch .jlinearch 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: 10px 0 1px 14px;
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;
}
.jkeyboardarch .jlinearch ul li.uppercase {
text-transform: uppercase;
}
.jkeyboardarch .jlinearch ul li:hover, .jkeyboardarch .jlinearch ul li:active {
background-color: #185a82;
}
.jkeyboardarch .jlinearch .return {
width: 120px;
}
.jkeyboardarch .jlinearch .space {
width: 456px;
}
.jkeyboardarch .jlinearch .numeric_switch {
width: 84px;
}
.jkeyboardarch .jlinearch .layout_switch {
}
.jkeyboardarch .jlinearch .shift {
width: 100px;
}
.jkeyboardarch .jlinearch .backspace {
width: 69px;
}
.nr-dashboard-theme .nr-dashboard-template .md-button:not(:first-of-type) {
margin-top: 0px;
}
/* The Modal (background) */
.modal-keyboard-archive {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
opacity:0.99;
z-index: 100; /* Sit on top */
padding-top: 500px; /* Location of the box */
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-keyboard-archive {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 820px;
height: 135%;
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: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
/* The Close Button */
.close-keyboard-archive {
color: black;
float: right;
font-size: 28px;
font-weight: bold;
}
.close-keyboard-archive:hover,
.close-keyboard-archive:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header-keyboard-archive {
padding: 2px 16px;
background-color: aliceblue;
color: white;
}
.modal-body-keyboard-archive {padding: 2px 16px;}
.modal-footer-keyboard-archive {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
/* Cells in even rows (2,4,6...) are one color */
tr:nth-child(even) td {
background: #F1F1F1;
}
/* Cells in odd rows (1,3,5...) are another (excludes header cells) */
tr:nth-child(odd) td {
background: #FEFEFE;
}
tr td:hover {
background: #666;
color: #FFF;
}
</style>
{{search}}
<form>
<span class="input-group">
<input type="text" id="search_files" name="search_files" placeholder="Recherche" ng-model="search">
<div>{{search}}</div>
<i class="fa fa-search"></i>
</span>
</form>
<div class="container" ng-app="sortApp">
<table>
<thead>
<tr style="width:100%">
<td>
<a href="#" ng-click="sortType = 'filename'; sortReverse = !sortReverse">
Nom de fichier
<span ng-show="sortType == 'filename' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'filename' && sortReverse" class="fa fa-caret-up"></span>
</a>
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="file in msg.payload | orderBy:sortType:sortReverse| filter:search track by $index" style="width:100%" flex>
<td>1
</td>
<td>2
</td>
<td>3
</td>
<td>4
</td>
<td>5
</td>
<td>6
</td>
</tr>
</tbody>
</table>
<div id="myModal-keyboard-archive" class="modal-keyboard-archive">
<!-- Modal content keyboard -->
<div class="modal-content-keyboard-archive">
<div class="modal-header-keyboard-archive">
<span class="close-keyboard-archive">×</span>
<h2 style="background-color: aliceblue !important;text-align: center;">Keyboard</h2>
</div>
<div class="modal-body-keyboard-archive">
<div id="keyboard-archive"></div>
<div>
</div>
</div>
</div>
</div>
<script>
// Get the modal keyboard
var modal_keyboard_archive = document.getElementById('myModal-keyboard-archive');
var classname = document.getElementsByClassName("input");
$('input').focus(function () {
$('#keyboard-archive').unbind().removeData();
$('#keyboard-archive').jkeyboardarch({
layout: "english",
input: $('#'+$(this).attr('id'))
});
});
var openModal = function (){
modal_keyboard_archive.style.display = "block";
};
for (var i=0; i < classname.length; i++){
classname[i].addEventListener('click', openModal, false);
}
// Get the fields that opens the modal keyboard
var txt_searchs = document.getElementById("search_files");
// Get the <span> element that closes the modal keyboard
var span_keyboard_archive = document.getElementsByClassName("close-keyboard-archive")[0];
// When the user clicks on the button, open the modal keyboard
txt_searchs.onfocus = function() {
modal_keyboard_archive.style.display = "block";
}
// When the user clicks on <span> (x), close the modal keyboard
span_keyboard_archive.onclick = function() {
modal_keyboard_archive.style.display = "none";
}
// When the user clicks anywhere outside of the modal keyboard , close it
window.onclick = function(event) {
if (event.target == modal_keyboard) {
modal_keyboard_archive.style.display = "none";
}
}
</script>
</div>i tried it and it doesn't show the layouts of keyboard when it shows.try it in my code and you will see.
