Virtual Keyboard
JsKeyboard requires an HTML DOM element on which to render. In most cases that would be an HTML Div. You create the canvas in the web page that is used by your application:
HTML
 Copy Code
|
|---|
<div id="keyboard" style="width: 214px; height: 252px;" /> |
It is necessary to assign an id to the DOM element because we will reference it in the JavaScript code later on.
II. Loading the Virtual Keyboard Script and CSS FilesYou need to reference following JS files to access the Virtual Keyboard API. If using NPM, it is enough to add a reference to @mindfusion/keyboard package, and the other ones will get pulled as dependencies.
| HTML
Copy Code
|
|---|
<script src="drawing.js" type="text/javascript"></script> |
If you use any of the CSS skins packed with the control or design your own keyboard style you have to reference them as well in the <head> section:
| HTML
Copy Code
|
|---|
<link href="css/VirtualKeyboard.Default.css" rel="Stylesheet" /> |
MindFusion.Keyboard-vsdoc.js contains code completion information in IntelliSense format. Add this to the top of your script file to enable code completion in Visual Studio and other code editors that support IntelliSense:
| JavaScript
Copy Code
|
|---|
<reference path="MindFusion.Keyboard-vsdoc.js" /> |
Then the editor should be able to show member lists and hints for all variables whose type can be inferred automatically.
You use the static VistualKeyboard.create method that takes as an argument the id of the HTML DOM element that we specified in step I.
| JavaScript
Copy Code
|
|---|
var vk = VirtualKeyboard.create( |
And with this the JavaScript Virtual Keyboard is created and you can use it in your application.
Browse the Programming Interface Overview topics for information on how to customize and use the keyboard library.
