The application uses MindFusion Virtual Keyboard for JavaScript. Here is a screenshot of the application:<\/p>\n
![\"Invisible](\"https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2018\/05\/hidden-keyboard.png\")
<\/a>Virtual keyboard in JavaScript that renders only when the user starts typing. The keyboard renders special symbols for several languages.<\/p><\/div>\n
I. The Keyboards for Spanish, German and French<\/strong><\/p>\n The three keyboard layouts with special symbols for the three languages are created with the Virtual Keyboard Layout Creator tool, that is packed with the JavaScript Keyboard library. We create a new compact keyboard and delete most of the keys. We type the desired key as character for the rest and use the Properties tab to set the size of the keyboard, as well the layout and the key alignment. Finally, we export the new keyboard layout as a json file (File \u2192 Export JavaScript. It is a good idea to save the keyboard layout as xml as well (File \u2192 Save As). This way you can load the keyboard gain, when you need to create another layout based on it or correct this one.<\/p>\n We have created now three json files:<\/p>\n Let\u2019s look at the contents of one of the json files:<\/p>\n Each file contains an array named \u201cnumpadDef\u201d. We need to change the name, because we will load each list when a certain language is selected, which means we must be able to differentiate among the languages. We rename the lists to layoutDefFr, layoutDefDe and layoutDefEs.<\/p>\n Here is what the Virtual Keyboard Layout Creator Tool looks like:<\/p>\n The virtual keyboard layout creator tool that is part of the JavaScript Keyboard library by MindFusion<\/p><\/div>\n II. The HTML Web Page<\/strong><\/p>\n We create a simple web page, where we add a reference to the JavaScript file of the Virtual Keyboard library:<\/p>\n Note that we place this reference at the end of the file, after the closing tag. The we need reference to the JavaScript files with the definitions of the virtual keyboards that we created in step I.<\/p>\n Finally, we add a reference to a JavaScript file that will hold the code for our sample. It will be empty for now.<\/p>\n The next step is to load the CSS file with the styling for the JS keyboard. We have chosen the Silver theme, you can choose whichever theme you want or create a custom one.<\/p>\n We have added also a reference to a a stylesheet that aligns correctly the<\/p>\n elements with the keyboard, the text area and the select list.<\/p>\n It contains code purely to align correctly the elements and we will not examine its contents.<\/p>\n Now, let\u2019s create the text area:<\/p>\n We create a form, called f1 and there we create the HTML textarea element. It handles to events: onfocus and onblur.<\/p>\n Next, the form contains a select with the three languages, whose keyboards with special symbols we have prepared:<\/p>\n Outside the form, we place a dive with the keyboard:<\/p>\n The virtual keyboard will be rendered with fixed size and by default is not rendered e.g. it\u2019s display is set to \u201cnone\u201d.<\/p>\n III. The JavaScript Code-Behind File<\/strong><\/p>\n First, we add two namespace mappings:<\/p>\n Then we handle the DOMContentLoaded event to create the Virtual Keyboard object. We use the div element that represents the keyboard as a parameter to the VirtualKeyboard constructor. We have provided the div element with an id in the HTML page.<\/p>\n We also set the selected index of the elements in the language list to -1 e.g. by default no language is selected and the keyboard will show the standard English typing keyboard.<\/p>\n Then we handle changes in the selection of the language:<\/p>\n When the user chooses one of our custom layouts we create a keyboard layout with the appropriate layoutDef object.<\/p>\n Next we handle the onfocus and onblur events with the methods showKeyboard() and hideKeyboard(). They just make the div with the keyboard visible or invisible:<\/p>\n And that\u2019s all. As you can see creating and loading a custom keyboard with MindFusion JS library is really as easy as 1, 2 3. You can download the complete source code of the sample from this link:<\/p>\n Download the Hidden Keyboard With Special Language Symbols JavaScript Sample<\/a><\/p>\n About MindFusion Virtual Keyboard for JavaScript:<\/em> A highly interactive, highly customizable library written in pure JavaScript that provides your web application with screen typing capabilities similar to those on mobile devices. The keyboard supports three predefined layouts: compact, default and extended. You can also use the keyboard layout creator tool that provides a convenient GUI to create and arrange your own keyboards. The library offers a well documented API with self-explanatory API members and tutorials that guarantee flat learning curve. You can choose among 8 predefined keyboard styles or customize them to create your own styles. Licenses are royalty-free, perpetual with discounts for freelancers, startups, academic institutions to name just a few. Learn more at https:\/\/mindfusion.dev\/javascript-keyboard.html<\/a><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":" This blog post will demonstrate how to create a keyboard that renders only when the user starts typing in a text box. When the user clicks outside the text box, the virtual keyboard disappears. There is another extra \u2013 a … Continue reading \n
var layoutDef =\n{\n\twidth: 565,\n\theight: 115,\n\tkeys:\n[\t{\t\n\t\tcode: 162,\n\t\ttype: \"regular\",\n\t\tcontent: \"\u00f9\",\n\t\tleft: 9,\n\t\ttop: 10,\n\t\twidth: 40,\n\t\theight: 40\n\t},\n\t{\t\n\t\tcode: 162,\n\t\ttype: \"regular\",\n\t\tcontent: \"\u00fb\",\n\t\tleft: 56,\n\t\ttop: 10,\n\t\twidth: 40,\n\t\theight: 40\n\t},\n\u2026\u2026\u2026\n{\t\n\t\tcode: 162,\n\t\ttype: \"regular\",\n\t\tcontent: \"\u0153\",\n\t\tleft: 507,\n\t\ttop: 58,\n\t\twidth: 40,\n\t\theight: 40\n\t}\n]\n};\n<\/pre>\n![\"Keyboard](\"https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2018\/05\/virtual-keyboard-layout-creator.png\")
<\/a><a<\/span> href<\/span>=\"http:\/\/Keyboard.js<\/a>\">http:\/\/Keyboard.js<\/a<\/span>><\/pre>\n<\/span>\n<\/span><script<\/span> src<\/span>=\"french-symbols.js<\/a>\" type<\/span>=\"text\/javascript<\/a>\"><\/script<\/span>>\n<\/span><script<\/span> src<\/span>=\"spanish-symbols.js<\/a>\" type<\/span>=\"text\/javascript<\/a>\"><\/script<\/span>>\n<\/span><script<\/span> src<\/span>=\"german-symbols.js<\/a>\" type<\/span>=\"text\/javascript<\/a>\"><\/script<\/span>><\/pre>\n<script<\/span> src<\/span>=\"HiddenKeyboard.js<\/a>\" type<\/span>=\"text\/javascript<\/a>\"><\/script<\/span>><\/pre>\n<\/span><link<\/span> href<\/span>=\"css\/VirtualKeyboard.Silver.css<\/a>\" rel<\/span>=\"Stylesheet<\/a>\" \/><\/pre>\n<link<\/span> href<\/span>=\"style.css<\/a>\" rel<\/span>=\"Stylesheet<\/a>\"><\/pre>\n<form id=\"f1\">\n <textarea id=\"text\" cols=\"55\" rows=\"15\">\n <\/textarea>\n<\/form><\/pre>\n
<select<\/span> id<\/span>=\"selectedLang<\/a>\" size<\/span>=\"3<\/a>\">\n<\/span><option<\/span> value<\/span>=\"Fr<\/a>\">French<\/option<\/span>>\n<\/span><option<\/span> value<\/span>=\"De<\/a>\">German<\/option<\/span>>\n<\/span><option<\/span> value<\/span>=\"Es<\/a>\">Spanish<\/option<\/span>><\/pre>\n<div<\/span> id<\/span>=\"keyboard<\/a>\" style<\/span>=\"width: 565px;height: 115px<\/a>\" \/<\/span>><\/pre>\nvar VirtualKeyboard = MindFusion.VirtualKeyboard;\nvar KeyboardLayout = MindFusion.KeyboardLayout;\n\n<\/pre>\n
document.addEventListener(\"DOMContentLoaded\", function (event)\n{\n\tdocument.getElementById(\"selectedLang\").selectedIndex = -1;\n\t\n\tvar vk = VirtualKeyboard.create(\n\t\tdocument.getElementById(\"keyboard\"));\n\tvk.setScaleToFitParent(false);\t\n\n\u2026\u2026\u2026\u2026\u2026\u2026\u2026\n\n});\n\n<\/pre>\n \n\nf1.selectedLang.onchange = function (event)\n\t{\n\t\t\n\tswitch (event.target.value) {\n case 'Fr':\n vk.setLayout(KeyboardLayout.create(layoutDefFr));\n break;\n case 'De':\n vk.setLayout(KeyboardLayout.create(layoutDefDe));\n break;\n case 'Es':\n vk.setLayout(KeyboardLayout.create(layoutDefEs));\n break;\t\n } \n }\n\n<\/pre>\nfunction showKeyboard() { \n\t\t\n\tvar x = document.getElementById(\"keyboard\"); \n\t\tx.style.display = \"block\";\t\t\t\n\t}\n\t\n\tfunction hideKeyboard() {\n var x = document.getElementById(\"keyboard\"); \n x.style.display = \"none\";\n \n\t}\n\n<\/pre>\n