elements with the keyboard, the text area and the select list.

<link href="style.css" rel="Stylesheet">

It contains code purely to align correctly the elements and we will not examine its contents.

Now, let’s create the text area:

<form id="f1">
    <textarea id="text" cols="55" rows="15">
    </textarea>
</form>

We create a form, called f1 and there we create the HTML textarea element. It handles to events: onfocus and onblur.

Next, the form contains a select with the three languages, whose keyboards with special symbols we have prepared:

<select id="selectedLang" size="3">
<option value="Fr">French</option>
<option value="De">German</option>
<option value="Es">Spanish</option>

Outside the form, we place a dive with the keyboard:

<div id="keyboard" style="width: 565px;height: 115px" />

The virtual keyboard will be rendered with fixed size and by default is not rendered e.g. it’s display is set to “none”.

III. The JavaScript Code-Behind File

First, we add two namespace mappings:

var VirtualKeyboard = MindFusion.VirtualKeyboard;
var KeyboardLayout = MindFusion.KeyboardLayout;

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.

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.

document.addEventListener("DOMContentLoaded", function (event)
{
	document.getElementById("selectedLang").selectedIndex = -1;
	
	var vk = VirtualKeyboard.create(
		document.getElementById("keyboard"));
	vk.setScaleToFitParent(false);	

…………………

});

Then we handle changes in the selection of the language:

 

f1.selectedLang.onchange = function (event)
	{
		
	switch (event.target.value) {
  case 'Fr':
    vk.setLayout(KeyboardLayout.create(layoutDefFr));
    break;
  case 'De':
  vk.setLayout(KeyboardLayout.create(layoutDefDe));
  break;
  case 'Es':
    vk.setLayout(KeyboardLayout.create(layoutDefEs));
    break;	
    } 
 }

When the user chooses one of our custom layouts we create a keyboard layout with the appropriate layoutDef object.

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:

function showKeyboard() { 
		
	var x = document.getElementById("keyboard"); 
		x.style.display = "block";			
	}
	
	function hideKeyboard() {
    var x = document.getElementById("keyboard");    
        x.style.display = "none";
    
	}

And that’s 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:

Download the Hidden Keyboard With Special Language Symbols JavaScript Sample

About MindFusion Virtual Keyboard for JavaScript: 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.eu/javascript-keyboard.html