DotNet Blog: JavaScript Virtual Keyboard

http://www.codeproject.com/KB/scripting/jvk.aspx
Download src jvk

Virtual keyboard bound to a TEXTAREA field

Introduction

Imagine that you are sitting in a London Internet cafe wishing to write an e-mail to your family living in Athens. It's good if someone in your family speaks English. If not, where would you find a keyboard with a Greek layout? I'm sure you can recall a dozen situations when you thought, "I wish I had another keyboard." This article presents the Virtual Keyboard that solves this usability problem. The design task for it can be specified as follows:

Allow text input from computers without the user's native language layout installed, therefore allowing the creation of national and multilingual interfaces -- e.g. Web-based e-mail -- that can be used worldwide.
Allow text input from computers without keyboards or with sensor screens -- hand-held PCs, smartphones, etc. -- or with remote controls such as mice, e-pens, etc. being the only input devices.
Protect users from keylogger-type spyware.

Installation of the Virtual Keyboard requires a casual knowledge of HTML and JavaScript. To be able to fine-tune the script, you must be familiar with W3C DOM Level 1, CSS Level 1 and the DOM/Microsoft Internet Explorer event model. Virtual Keyboard is an open-source script distributed under the zlib/libpng license.

Setup

Six easy steps:

Download the source archive.
Choose your installation:
- vkboard.js (1-vkboard folder in the archive) is the primary script. Full keyboard is simulated as follows:
- vkboards.js (2-vkboard_slim folder) is almost the same as previous, but the language menu, which can be accessed by clicking on the red rectangle in the left-bottom corner of the keyboard, has a special configuration. The cells are arranged in rows, not as a simple drop-down menu like in the previous variant.
  This installation is recommended if you're short on space (UMPC, touchscreen kiosk, etc.) or if you have 4 or more layouts installed.
- vnumpad.js (3-numpad_full folder) is the numpad part of the keyboard.
- vatmpad.js (4-numpad_atm folder) is a stripped numpad that contains only the Enter and number keys.
Include a reference to the chosen script file in your HTML page:
Collapse
```
<HTML>     <HEAD>         <SCRIPT type="text/javascript" src="vkboard.js">SCRIPT>         ...      </HEAD>  ...
```
Note that for each type of installation, two script files are available:
- vkboard.js /vkboards.js /vnumpad.js /vatmpad.js are the original script. If you wish to change the script or just want to learn how it works, this is the file for you to look at.
- vkboardc.js /vkboardsc.js /vnumpadc.js /vatmpadc.js is a compressed version of the script, respectively 30.5%/30.5%/39.8%/39.5% smaller than the original. This is the file you should use on the Web.

Define a callback function:

Collapse

<HTML>     <HEAD>          <SCRIPT type="text/javascript" src="vkboard.js">SCRIPT>          <SCRIPT>          // Minimal callback function:         function keyb_callback(char)         {             // Let's bind vkeyboard to the </span>              // <span class="code-keyword" style="color: blue; ">with</span> id=<span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">textfield"</span>:             var text =                 document.getElementById(<span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">textfield"</span>), val = text.value;              switch(ch)             {                 <span class="code-keyword" style="color: blue; ">case</span> <span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">BackSpace"</span>:                 var min=(val.charCodeAt(val.length - <span class="code-digit" style="color: navy; ">1</span>) == <span class="code-digit" style="color: navy; ">10</span>) ? <span class="code-digit" style="color: navy; ">2</span> : 1;                 text.value = val.substr(0, val.length - min);                 break;                 <span class="code-keyword" style="color: blue; ">case</span> <span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">Enter"</span>:                    text.value += <span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">\n"</span>;                    break;                 default:                    text.value += ch;             }         }          <span class="code-keyword" style="color: blue; "></</span><span class="code-leadattribute" style="color: rgb(128, 0, 0); ">SCRIPT</span><span class="code-keyword" style="color: blue; ">></span>      <span class="code-keyword" style="color: blue; "><</span><span class="code-keyword" style="color: blue; ">/</span><span class="code-leadattribute" style="color: rgb(128, 0, 0); ">HEAD</span><span class="code-keyword" style="color: blue; ">></span>     ...</pre><p style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">The callback function must have one or two parameters. The first parameter is mandatory and accepts a <code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; "><span class="code-SDKkeyword" style="color: rgb(51, 153, 153); ">string</span></code> value returned by the vkeyboard script. The second parameter is optional and accepts the <code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">id</code> of the container of the vkeyboard that called the callback. It may be useful if you bind a single callback function to multiple vkeyboards. Note that this is the most basic callback function. An example of a more advanced code snippet is given <a href="http://www.codeproject.com/KB/scripting/jvk.aspx#editfull" style="text-decoration: none; ">later</a>.</p></li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; "><p style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">Define a container for the keyboard, which must be an empty <code lang="html" style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">DIV</code> or <code lang="html" style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">SPAN</code>.</p><div id="premain2" class="small-text" style="font-size: 8pt !important; width: 1031px; cursor: pointer; "><img id="preimg2" src="http://www.codeproject.com/images/minus.gif" height="9" width="9" preid="2" /><span id="precollapse2" preid="2" style="margin-bottom: 0px; "> Collapse</span></div><pre lang="html" id="pre2" style="background-color: rgb(251, 237, 187); padding-top: 7pt; padding-right: 7pt; padding-bottom: 7pt; padding-left: 7pt; font: normal normal normal 9pt/normal 'Courier New', Courier, mono; white-space: pre; overflow-x: auto !important; overflow-y: auto !important; margin-top: 0px; "> <span class="code-keyword" style="color: blue; "><</span><span class="code-leadattribute" style="color: rgb(128, 0, 0); ">HTML</span><span class="code-keyword" style="color: blue; ">></span>      ...      <span class="code-keyword" style="color: blue; "><</span><span class="code-leadattribute" style="color: rgb(128, 0, 0); ">BODY</span><span class="code-keyword" style="color: blue; ">></span>          ...          <span class="code-keyword" style="color: blue; "><</span><span class="code-leadattribute" style="color: rgb(128, 0, 0); ">TEXTAREA</span> <span class="code-attribute" style="color: red; ">id</span><span class="code-keyword" style="color: blue; ">="</span><span class="code-keyword" style="color: blue; ">textfield"</span> <span class="code-attribute" style="color: red; ">rows</span><span class="code-keyword" style="color: blue; ">="</span><span class="code-keyword" style="color: blue; ">10"</span> <span class="code-attribute" style="color: red; ">cols</span><span class="code-keyword" style="color: blue; ">="</span><span class="code-keyword" style="color: blue; ">50"</span><span class="code-keyword" style="color: blue; ">></span><span class="code-keyword" style="color: blue; "><</span><span class="code-keyword" style="color: blue; ">/</span><span class="code-leadattribute" style="color: rgb(128, 0, 0); ">TEXTAREA</span><span class="code-keyword" style="color: blue; ">></span>          <strong><span class="code-keyword" style="color: blue; "><</span><span class="code-leadattribute" style="color: rgb(128, 0, 0); ">DIV</span> <span class="code-attribute" style="color: red; ">id</span><span class="code-keyword" style="color: blue; ">="</span><span class="code-keyword" style="color: blue; ">keyboard"</span><span class="code-keyword" style="color: blue; ">></span><span class="code-keyword" style="color: blue; "><</span><span class="code-keyword" style="color: blue; ">/</span><span class="code-leadattribute" style="color: rgb(128, 0, 0); ">DIV</span><span class="code-keyword" style="color: blue; ">></span></strong>      <span class="code-keyword" style="color: blue; "><</span><span class="code-keyword" style="color: blue; ">/</span><span class="code-leadattribute" style="color: rgb(128, 0, 0); ">BODY</span><span class="code-keyword" style="color: blue; ">></span>  <span class="code-keyword" style="color: blue; "><</span><span class="code-keyword" style="color: blue; ">/</span><span class="code-leadattribute" style="color: rgb(128, 0, 0); ">HTML</span><span class="code-keyword" style="color: blue; ">></span></pre></li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; "><p style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">Finally, show the keyboard.</p><div id="premain3" class="small-text" style="font-size: 8pt !important; width: 1031px; cursor: pointer; "><img id="preimg3" src="http://www.codeproject.com/images/minus.gif" height="9" width="9" preid="3" /><span id="precollapse3" preid="3" style="margin-bottom: 0px; "> Collapse</span></div><pre lang="html" id="pre3" style="background-color: rgb(251, 237, 187); padding-top: 7pt; padding-right: 7pt; padding-bottom: 7pt; padding-left: 7pt; font: normal normal normal 9pt/normal 'Courier New', Courier, mono; white-space: pre; overflow-x: auto !important; overflow-y: auto !important; margin-top: 0px; "> <span class="code-keyword" style="color: blue; "><</span><span class="code-leadattribute" style="color: rgb(128, 0, 0); ">BODY</span> <span class="code-attribute" style="color: red; "><strong>onload</strong></span><strong><span class="code-keyword" style="color: blue; ">="</span><span class="code-keyword" style="color: blue; ">new VKeyboard("</span><span class="code-attribute" style="color: red; ">keyboard",</span> <span class="code-attribute" style="color: red; ">keyb_callback);</span></strong>"<span class="code-keyword" style="color: blue; ">></span>   <span class="code-keyword" style="color: blue; "><!--</span><span class="code-keyword" style="color: blue; "><span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; "> VKeyboard is shown on load, bound to container with       id="keyboard" and with callback function "keyb_callback" </span>--></span></pre><p style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">Of course, the creation of <code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">VKeyboard</code> -- numpad: <code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">VNumpad</code>, ATM-style numpad: <code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">VATMpad</code> -- can be used anywhere a JavaScript code can be.</p></li></ol><h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 13pt; line-height: 1.2em; font-weight: bold; color: rgb(255, 153, 0); ">API</h2><p style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">The <code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">VKeyboard</code> constructor has a myriad of parameters to help you control its look and feel. Here is the full list, together with parameter defaults.</p><div id="premain4" class="small-text" style="font-size: 8pt !important; width: 1071px; cursor: pointer; "><img id="preimg4" src="http://www.codeproject.com/images/minus.gif" height="9" width="9" preid="4" /><span id="precollapse4" preid="4" style="margin-bottom: 0px; "> Collapse</span></div><pre lang="jscript" id="pre4" style="background-color: rgb(251, 237, 187); padding-top: 7pt; padding-right: 7pt; padding-bottom: 7pt; padding-left: 7pt; font: normal normal normal 9pt/normal 'Courier New', Courier, mono; white-space: pre; overflow-x: auto !important; overflow-y: auto !important; margin-top: 0px; "><span class="code-keyword" style="color: blue; ">var</span> vkb =     <span class="code-keyword" style="color: blue; ">new</span> VKeyboard(<strong><span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">keyboard"</span></strong>,   <span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; ">//</span><span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; "> container's id, mandatory</span>                   <strong>keyb_callback</strong>,<span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; ">//</span><span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; "> reference to callback function, mandatory</span>                                 <span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; ">//</span><span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; "> (this & following parameters are optional)</span>                   <strong>true</strong>,         <span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; ">//</span><span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; "> create the arrow keys or not?</span>                   <strong>true</strong>,         <span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; ">//</span><span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; "> create up and down arrow keys?</span>                   <strong>false</strong>,        <span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; ">//</span><span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; "> reserved</span>                   <strong>true</strong>,         <span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; ">//</span><span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; "> create the numpad or not?</span>                   <strong><span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">"</span></strong>,           <span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; ">//</span><span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; "> font name ("" == system default)</span>                   <strong><span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">14px"</span></strong>,       <span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; ">//</span><span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; "> font size in px</span>                   <strong><span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">#000"</span></strong>,       <span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; ">//</span><span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; "> font color</span>                   <strong><span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">#F00"</span></strong>,       <span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; ">//</span><span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; "> font color for the dead keys</span>                   <strong><span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">#FFF"</span></strong>,       <span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; ">//</span><span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; "> keyboard base background color</span>                   <strong><span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">#FFF"</span></strong>,       <span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; ">//</span><span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; "> keys' background color</span>                   <strong><span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">#DDD"</span></strong>,       <span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; ">//</span><span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; "> background color of switched/selected item</span>                   <strong><span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">#777"</span></strong>,       <span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; ">//</span><span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; "> border color</span>                   <strong><span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">#CCC"</span></strong>,       <span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; ">//</span><span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; "> border/font color of "inactive" key</span>                                 <span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; ">//</span><span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; "> (key with no value/disabled)</span>                   <strong><span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">#FFF"</span></strong>,       <span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; ">//</span><span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; "> background color of "inactive" key</span>                                 <span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; ">//</span><span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; "> (key with no value/disabled)</span>                   <strong><span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">#F77"</span></strong>,       <span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; ">//</span><span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; "> border color of language selector's cell</span>                   <strong>true</strong>,         <span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; ">//</span><span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; "> show key flash on click? (false by default)</span>                   <strong><span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">#CC3300"</span></strong>,    <span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; ">//</span><span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; "> font color during flash</span>                   <strong><span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">#FF9966"</span></strong>,    <span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; ">//</span><span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; "> key background color during flash</span>                   <strong><span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">#CC3300"</span></strong>,    <span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; ">//</span><span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; "> key border color during flash</span>                   <strong>false</strong>,        <span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; ">//</span><span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; "> embed VKeyboard into the page?</span>                   <strong>true</strong>,         <span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; ">//</span><span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; "> use 1-pixel gap between the keys?</span>                   <strong>0</strong>);           <span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; ">//</span><span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; "> index (0-based) of the initial layout</span></pre><p style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">Please be careful when upgrading vkeyboard from earlier versions. Always check the number/flow of the parameters. <code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">VNumpad</code> and <code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">VATMpad</code> have a limited set of parameters:</p><div id="premain5" class="small-text" style="font-size: 8pt !important; width: 1071px; cursor: pointer; "><img id="preimg5" src="http://www.codeproject.com/images/minus.gif" height="9" width="9" preid="5" /><span id="precollapse5" preid="5" style="margin-bottom: 0px; "> Collapse</span></div><pre lang="jscript" id="pre5" style="background-color: rgb(251, 237, 187); padding-top: 7pt; padding-right: 7pt; padding-bottom: 7pt; padding-left: 7pt; font: normal normal normal 9pt/normal 'Courier New', Courier, mono; white-space: pre; overflow-x: auto !important; overflow-y: auto !important; margin-top: 0px; "><span class="code-keyword" style="color: blue; ">var</span> vkb =     <span class="code-keyword" style="color: blue; ">new</span> VNumpad(<strong><span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">numpad"</span></strong>,     <span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; ">//</span><span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; "> container's id, mandatory</span>                 <strong>pad_callback</strong>, <span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; ">//</span><span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; "> reference to the callback function, mandatory</span>                 <strong><span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">"</span></strong>,           <span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; ">//</span><span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; "> font name ("" == system default)</span>                               <span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; ">//</span><span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; "> (this and following parameters are optional)</span>                 <strong><span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">14px"</span></strong>,       <span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; ">//</span><span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; "> font size in px</span>                 <strong><span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">#000"</span></strong>,       <span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; ">//</span><span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; "> font color</span>                 <strong><span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">#FFF"</span></strong>,       <span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; ">//</span><span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; "> keyboard base background color</span>                 <strong><span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">#FFF"</span></strong>,       <span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; ">//</span><span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; "> keys' background color</span>                 <strong><span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">#777"</span></strong>,       <span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; ">//</span><span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; "> border color</span>                 <strong>true</strong>,         <span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; ">//</span><span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; "> show key flash on click? (false by default<strong>*</strong>)</span>                 <strong><span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">#CC3300"</span></strong>,    <span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; ">//</span><span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; "> font color for flash event</span>                 <strong><span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">#FF9966"</span></strong>,    <span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; ">//</span><span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; "> key background color for flash event</span>                 <strong><span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">#CC3300"</span></strong>,    <span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; ">//</span><span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; "> key border color for flash event</span>                 <strong>false</strong>,        <span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; ">//</span><span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; "> embed VNumpad into the page?</span>                 <strong>true</strong>);        <span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; ">//</span><span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; "> use 1-pixel gap between the keys?</span></pre><p style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">Note that although "flash switch" is off by default, it is switched on in all of the provided <a href="http://www.codeproject.com/KB/scripting/jvk.aspx#samples" style="text-decoration: none; ">samples</a>. <code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">VKeyboard</code> has the following <code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; "><span class="code-keyword" style="color: blue; ">public</span></code> methods:</p><ul><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; "><code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">Show</code>: Shows or hides the whole vkeyboard. It has a single optional parameter, a boolean value that states whether to show or hide.<div id="premain6" class="small-text" style="font-size: 8pt !important; width: 1031px; cursor: pointer; "><img id="preimg6" src="http://www.codeproject.com/images/minus.gif" height="9" width="9" preid="6" /><span id="precollapse6" preid="6" style="margin-bottom: 0px; "> Collapse</span></div><pre lang="jscript" id="pre6" style="background-color: rgb(251, 237, 187); padding-top: 7pt; padding-right: 7pt; padding-bottom: 7pt; padding-left: 7pt; font: normal normal normal 9pt/normal 'Courier New', Courier, mono; white-space: pre; overflow-x: auto !important; overflow-y: auto !important; margin-top: 0px; ">vkb.Show(<span class="code-keyword" style="color: blue; ">true</span>);  <span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; ">//</span><span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; "> Shows the vkeyboard</span> vkb.Show(<span class="code-keyword" style="color: blue; ">false</span>); <span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; ">//</span><span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; "> Hides the vkeyboard</span> vkb.Show();      <span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; ">//</span><span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; "> Shows the vkeyboard again. Action is by default.</span></pre></li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; "><code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">ShowNumpad</code> (full and slim variants only): Shows or hides the numpad. It has a single optional parameter, a boolean value that dictates whether to show or hide.<div id="premain7" class="small-text" style="font-size: 8pt !important; width: 1031px; cursor: pointer; "><img id="preimg7" src="http://www.codeproject.com/images/minus.gif" height="9" width="9" preid="7" /><span id="precollapse7" preid="7" style="margin-bottom: 0px; "> Collapse</span></div><pre lang="jscript" id="pre7" style="background-color: rgb(251, 237, 187); padding-top: 7pt; padding-right: 7pt; padding-bottom: 7pt; padding-left: 7pt; font: normal normal normal 9pt/normal 'Courier New', Courier, mono; white-space: pre; overflow-x: auto !important; overflow-y: auto !important; margin-top: 0px; ">vkb.ShowNumpad(<span class="code-keyword" style="color: blue; ">true</span>);  <span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; ">//</span><span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; "> Shows the numpad</span> vkb.ShowNumpad(<span class="code-keyword" style="color: blue; ">false</span>); <span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; ">//</span><span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; "> Hides the numpad</span> vkb.ShowNumpad();      <span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; ">//</span><span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; "> Shows the numpad again. This action is by default.</span></pre></li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; "><code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; "><a name="<span" class="code-string" style="text-decoration: none; color: purple; ">"<span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">"</span>set-param<span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">"</span>>SetParameters</a></code>: Allows you to adjust vkeyboard parameters at runtime. The function accepts an even number of values in pairs: the vkeyboard parameter name and parameter value.<div id="premain8" class="small-text" style="font-size: 8pt !important; width: 1031px; cursor: pointer; "><img id="preimg8" src="http://www.codeproject.com/images/minus.gif" height="9" width="9" preid="8" /><span id="precollapse8" preid="8" style="margin-bottom: 0px; "> Collapse</span></div><pre lang="jscript" id="pre8" style="background-color: rgb(251, 237, 187); padding-top: 7pt; padding-right: 7pt; padding-bottom: 7pt; padding-left: 7pt; font: normal normal normal 9pt/normal 'Courier New', Courier, mono; white-space: pre; overflow-x: auto !important; overflow-y: auto !important; margin-top: 0px; "><span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; ">//</span><span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; "> Adjusting single parameter:</span> vkb.SetParameters(<span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">font-color"</span>, <span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">#F0A050"</span>); <span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; ">//</span><span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; "> Adjusting two parameters at once:</span> vkb.SetParameters(<span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">font-name"</span>, <span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">Arial"</span>, <span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">font-color"</span>, <span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">#F0A050"</span>);</pre><p style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">Valid parameter names are:</p><ul type="disc"><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; "><code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">callback</code> - callback function reference. Valid parameter value: reference to any function with 1 or 2 formal parameters</li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; "><code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">font-name</code> - name of keyboard font. Valid parameter value: font name or empty string (= default font)</li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; "><code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">font-size</code> - font size in pixels. Valid parameter value: font size in pixels</li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; "><code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">font-color</code> - font color. Valid parameter value here and further on: <code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; "><span class="code-SDKkeyword" style="color: rgb(51, 153, 153); ">string</span></code> in format of <code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">#xxxxxx</code> or <code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">#xxx</code>, where <code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">x</code> is any valid hexadecimal digit</li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; "><code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">dead-color</code> - color of the dead keys</li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; "><code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">base-color</code> - color of the keyboard base</li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; "><code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">key-color</code> - color of the keys</li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; "><code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">selection-color</code> - color of: selected item in the language menu or active modifier key</li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; "><code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">border-color</code> - color of the key border</li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; "><code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">inactive-border-color</code> - border color of the disabled key</li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; "><code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">inactive-key-color</code> - background color of the disabled key</li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; "><code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">lang-cell-color</code> - border color of the language menu item</li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; "><code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">click-font-color</code> - border color of the language menu item</li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; "><code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">click-key-color</code> - border color of the language menu item</li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; "><code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">click-border-color</code> - border color of the language menu item</li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; "><code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">show-click</code> - show key flash on click. Valid parameter value: <code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; "><span class="code-keyword" style="color: blue; ">true</span></code> or <code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; "><span class="code-keyword" style="color: blue; ">false</span></code></li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; "><code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">layout</code> - index (0-based integer) of the layout to switch to. Use it to programmatically switch layouts</li></ul></li></ul><a name="samples" style="text-decoration: none; "><h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 13pt; line-height: 1.2em; font-weight: bold; color: rgb(255, 153, 0); ">Test Suite</h2></a><p style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">The script comes with the following samples:</p><ol><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; "><p style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; "><em>1-edit-simple.html</em>: The most basic installation of the JavaScript Virtual Keyboard.</p></li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; "><p style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; "><em>2-edit-full.html</em>: Almost the same as above, but the <a href="http://www.codeproject.com/KB/scripting/jvk.aspx#editfull" style="text-decoration: none; "><code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">keyb_callback</code> function</a> is not so simple as it was. While simple installation only appends or deletes characters from the end of the text in a <code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">TEXTAREA</code>, this sample allows you to edit text in the way you're used to with any other text processor. This sample shows how the JavaScript Virtual Keyboard should normally be used. All other samples are derived from this one.</p></li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; "><p style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; "><em>3-edit-translator.html</em>: This one is useful if you do have the keyboard, but it doesn't have your native layout on its keys. Simply run this installation, switch vkeyboard to your native layout and type with a real keyboard, not a mouse. The script will substitute the typed characters with those chosen in vkeyboard.</p></li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; "><p style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; "><em>4-test-change.html</em>: Sample illustrates the use of the <a href="http://www.codeproject.com/KB/scripting/jvk.aspx#set-param" style="text-decoration: none; "><code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">SetParameters</code></a> API. Watch how vkeyboard changes its color.</p></li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; "><p style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; "><em>5-test-fly.html</em>: Sample shows how to handle multiple INPUT fields with a single vkeyboard.</p></li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; "><p style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; "><em>6-test-fly-anonym.html</em>: Almost the same as above, but INPUT fields are allowed to omit the <code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">id</code> property. Can be very useful for introducing vkeyboard into existing sites/pages where page changes are undesirable.</p></li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; "><p style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; "><em>7-test-any-css.html</em>: Sample shows how to set the vkeyboard font size with units other than pixels. A special function, <code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">convert_to_px</code>, is used to convert arbitrary unit <code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; "><span class="code-SDKkeyword" style="color: rgb(51, 153, 153); ">string</span></code>s to pixel-based values. The following units are allowed: <code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">px</code>, <code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">%</code>, <code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">em</code>, <code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">ex</code>, <code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">pt</code>, <code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">pc</code>, <code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">cm</code>, <code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">mm</code> and <code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; "><span class="code-keyword" style="color: blue; ">in</span></code>. <a name="very-note" style="text-decoration: none; ">Note</a> that the<code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">convert_to_px</code> function is still quite experimental. The main problem is that only the Microsoft Internet Explorer browser provides a way -- via the<code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">window.screen.logicalXDPI</code> property -- to retrieve the current screen DPI setting, which is used to convert from absolute to relative length units. With any other browser, only <code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">px</code>, <code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">%</code>, <code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">em</code> and <code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">ex</code> can be used safely. A "usual" setting of 96 dots per inch -- quite common for Windows machines -- is used if other length units are specified.</p></li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; "><p style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; "><a name="scale-issue" style="text-decoration: none; "><em>8-test-scale.html</em></a>: This sample shows how to sidestep the font scaling problem in Mozilla and Microsoft Internet Explorer browsers. The problem with Microsoft Internet Explorer is that it only zooms, i.e. changes font size, on elements that do not have the <code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">font-size</code> style set explicitly. The Mozilla browser has a similar problem: it does change the <code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">font-size</code>, but does not change the dimensions of the text's container element. In this sample, script tracks the changes to the base <code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">font-size</code> and uses the <a href="http://www.codeproject.com/KB/scripting/jvk.aspx#set-param" style="text-decoration: none; "><code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">SetParameters</code></a> API to appropriately scale the vkeyboard layout. This sample should be viewed only in Mozilla (Firefox) and Microsoft Internet Explorer. Opera browser implements a smart zoom -- i.e. it just zooms the entire page -- and thus does not suffer from the problem. You can also overcome this trouble with one of the Microsoft Internet Explorer's wrapper browsers. For example, <a href="http://www.maxthon.com/" style="text-decoration: none; ">MyIE2 (Maxthon)</a> also implements a smart zoom. There are also <a href="http://forums.mozillazine.org/viewtopic.php?t=452263&highlight=zoom+opera" style="text-decoration: none; ">rumors</a> that the Firefox 3 browser will feature an Opera-like page zoom behaviour.</p></li></ol><p style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">Note that all of the above samples can be found in the <em>vkboard</em> folder of the source <a href="http://www.codeproject.com/KB/scripting/jvk/jvk_src.zip" style="text-decoration: none; ">archive</a>. Variants other than the full keyboard are not provided with the full test suite, only with a single sample that shows the most simple installation of every variant.</p><h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 13pt; line-height: 1.2em; font-weight: bold; color: rgb(255, 153, 0); ">Creating Your Own Language Layout</h2><p style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">Two easy steps:</p><ul><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">Append the <code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">avail_langs</code> array with a two-member array consisting of the language abbreviation -- usually an <a href="http://en.wikipedia.org/wiki/ISO_639-1" style="text-decoration: none; ">ISO 639-1</a> language code -- and the layout name written in that language, using Unicode hex values where required.<div id="premain9" class="small-text" style="font-size: 8pt !important; width: 1031px; cursor: pointer; "><img id="preimg9" src="http://www.codeproject.com/images/minus.gif" height="9" width="9" preid="9" /><span id="precollapse9" preid="9" style="margin-bottom: 0px; "> Collapse</span></div><pre lang="jscript" id="pre9" style="background-color: rgb(251, 237, 187); padding-top: 7pt; padding-right: 7pt; padding-bottom: 7pt; padding-left: 7pt; font: normal normal normal 9pt/normal 'Courier New', Courier, mono; white-space: pre; overflow-x: auto !important; overflow-y: auto !important; margin-top: 0px; ">avail_langs:     [[<span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">Us"</span>, <span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">English (US)"</span>],         [<span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">Ca"</span>, <span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">Canadian"</span>],         [<span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">Ru"</span>, <span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">Рус"</span> +         <span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">ский"</span>],         [<span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">De"</span>, <span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">Deutsch"</span>],         [<span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">Fr"</span>, <span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">Français"</span>],         [<span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">Es"</span>, <span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">Español"</span>],         [<span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">It"</span>, <span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">Italiano"</span>],         <strong>[<span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">Cz"</span>, <span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">Česky"</span>]</strong>,         [<span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">El"</span>, <span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">Έλλ"</span> +         <span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">ηνας"</span>],         [<span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">He"</span>, <span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">עברית"</span>]];</pre></li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">Define "normal" and, optionally, the "Caps Lock"ed, "Shift"ed, "AltGr"ed and "AltGr+Shift"ed arrays. The following rules apply:<ul><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">Each array's name must begin with the language abbreviation and the underscore symbol.</li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">Names of arrays with values representing symbols for a keyboard with "Caps Lock" pressed must end with <code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">caps</code>.<div id="premain10" class="small-text" style="font-size: 8pt !important; width: 991px; cursor: pointer; "><img id="preimg10" src="http://www.codeproject.com/images/minus.gif" height="9" width="9" preid="10" /><span id="precollapse10" preid="10" style="margin-bottom: 0px; "> Collapse</span></div><pre lang="jscript" id="pre10" style="background-color: rgb(251, 237, 187); padding-top: 7pt; padding-right: 7pt; padding-bottom: 7pt; padding-left: 7pt; font: normal normal normal 9pt/normal 'Courier New', Courier, mono; white-space: pre; overflow-x: auto !important; overflow-y: auto !important; margin-top: 0px; "><span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; ">//</span><span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; "> Czech layout:</span> Cz_caps: [<span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">;"</span>, ... , <span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">-"</span>];</pre></li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">Names of arrays with values representing symbols for a keyboard with "Shift" pressed must end with <code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">shift</code>.<div id="premain11" class="small-text" style="font-size: 8pt !important; width: 991px; cursor: pointer; "><img id="preimg11" src="http://www.codeproject.com/images/minus.gif" height="9" width="9" preid="11" /><span id="precollapse11" preid="11" style="margin-bottom: 0px; "> Collapse</span></div><pre lang="jscript" id="pre11" style="background-color: rgb(251, 237, 187); padding-top: 7pt; padding-right: 7pt; padding-bottom: 7pt; padding-left: 7pt; font: normal normal normal 9pt/normal 'Courier New', Courier, mono; white-space: pre; overflow-x: auto !important; overflow-y: auto !important; margin-top: 0px; ">Cz_shift: [<span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">º"</span>, ... , <span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">_"</span>];</pre></li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">Names of arrays with values representing symbols for a keyboard with "AltGr" pressed must end with <code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">alt_gr</code>.<div id="premain12" class="small-text" style="font-size: 8pt !important; width: 991px; cursor: pointer; "><img id="preimg12" src="http://www.codeproject.com/images/minus.gif" height="9" width="9" preid="12" /><span id="precollapse12" preid="12" style="margin-bottom: 0px; "> Collapse</span></div><pre lang="jscript" id="pre12" style="background-color: rgb(251, 237, 187); padding-top: 7pt; padding-right: 7pt; padding-bottom: 7pt; padding-left: 7pt; font: normal normal normal 9pt/normal 'Courier New', Courier, mono; white-space: pre; overflow-x: auto !important; overflow-y: auto !important; margin-top: 0px; ">Cz_alt_gr: [..., <span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">!"</span>, <span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">/"</span>];</pre></li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">Names of arrays with values representing symbols for a keyboard with the "AltGr" and "Shift" keys pressed must end with <code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">alt_gr_shift</code>.<div id="premain13" class="small-text" style="font-size: 8pt !important; width: 991px; cursor: pointer; "><img id="preimg13" src="http://www.codeproject.com/images/minus.gif" height="9" width="9" preid="13" /><span id="precollapse13" preid="13" style="margin-bottom: 0px; "> Collapse</span></div><pre lang="jscript" id="pre13" style="background-color: rgb(251, 237, 187); padding-top: 7pt; padding-right: 7pt; padding-bottom: 7pt; padding-left: 7pt; font: normal normal normal 9pt/normal 'Courier New', Courier, mono; white-space: pre; overflow-x: auto !important; overflow-y: auto !important; margin-top: 0px; ">Cz_alt_gr_shift: [<span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">~"</span>, ... , <span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">?"</span>];</pre></li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">Names of arrays with values representing symbols for a keyboard's normal condition -- i.e. with no modifier keys pressed -- must end with <code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">normal</code>.<div id="premain14" class="small-text" style="font-size: 8pt !important; width: 991px; cursor: pointer; "><img id="preimg14" src="http://www.codeproject.com/images/minus.gif" height="9" width="9" preid="14" /><span id="precollapse14" preid="14" style="margin-bottom: 0px; "> Collapse</span></div><pre lang="jscript" id="pre14" style="background-color: rgb(251, 237, 187); padding-top: 7pt; padding-right: 7pt; padding-bottom: 7pt; padding-left: 7pt; font: normal normal normal 9pt/normal 'Courier New', Courier, mono; white-space: pre; overflow-x: auto !important; overflow-y: auto !important; margin-top: 0px; ">Cz_normal: [<span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">;"</span>, ... , <span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">-"</span>];</pre></li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">Each array must have exactly 48 entries, each containing either the <a href="http://unicode.coeurlumiere.com/" style="text-decoration: none; ">hexadecimal value</a> of the appropriate symbol or, in the case of a dead key, the array consisting of the hex value for this dead symbol and the name of one of the following predefined arrays:<ul><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; "><code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">Acute</code> (?)</li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; "><code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">Breve</code> (?)</li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; "><code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">Caron</code> (?)</li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; "><code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">Cedilla</code> (?)</li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; "><code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">Circumflex</code> (^)</li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; "><code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">DialytikaTonos</code> (?, dialytika tonos, combined acute + umlaut)</li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; "><code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">DotAbove</code> (?, dot above)</li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; "><code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">DoubleAcute</code> (?, double acute)</li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; "><code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">Grave</code> (`)</li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; "><code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">Ogonek</code> (?)</li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; "><code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">RingAbove</code> (°, ring above)</li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; "><code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">Tilde</code> (~)</li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; "><code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">Umlaut</code> (?)</li></ul><p style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">Also, the <code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">Macron</code> (¯) diacritic array is available via the <em>macron.txt</em> file in the <em>1-vkboard</em> folder of the <a href="http://www.codeproject.com/KB/scripting/jvk/jvk_src.zip" style="text-decoration: none; ">archive</a>. It is not included to the main script because no layout I know implements it as a dead key.</p><div id="premain15" class="small-text" style="font-size: 8pt !important; width: 991px; cursor: pointer; "><img id="preimg15" src="http://www.codeproject.com/images/minus.gif" height="9" width="9" preid="15" /><span id="precollapse15" preid="15" style="margin-bottom: 0px; "> Collapse</span></div><pre lang="jscript" id="pre15" style="background-color: rgb(251, 237, 187); padding-top: 7pt; padding-right: 7pt; padding-bottom: 7pt; padding-left: 7pt; font: normal normal normal 9pt/normal 'Courier New', Courier, mono; white-space: pre; overflow-x: auto !important; overflow-y: auto !important; margin-top: 0px; ">Cz_alt_gr: [<strong>[<span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">`"</span>, <span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">Grave"</span>]</strong>, <span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; ">//</span><span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; "> dead key</span>     <span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">!"</span>, ...                <span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; ">//</span><span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; "> simple key</span></pre></li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">Arrays are mapped to the layout according to the following illustration, where numbers within cells are the array indices.<p style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; "><img height="137" alt="array-to-key mapping" hspace="0" src="http://www.codeproject.com/KB/scripting/jvk/jvk_ndx.jpg" width="546" border="0" /></p></li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">The "normal" array is mandatory; others are optional.</li></ul><p style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; "><a name="languages" style="text-decoration: none; ">The following layouts</a> are built into the full and slim keyboard variants. The number/index next to the layout name is the layout index in the <a href="http://www-306.ibm.com/software/globalization/topics/keyboards/registry_index.jsp" style="text-decoration: none; ">IBM Globalization database</a>:</p><ul><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">English (US International) - <a href="http://www-306.ibm.com/software/globalization/topics/keyboards/KBD103P.jsp" style="text-decoration: none; ">103P</a></li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">Canadian (multilingual standard) - taken from Wikipedia article on <a href="http://en.wikipedia.org/wiki/Keyboard_layout#Canadian_Multilingual_Standard" style="text-decoration: none; ">keyboard layouts</a></li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">German - <a href="http://www-306.ibm.com/software/globalization/topics/keyboards/KBD129.jsp" style="text-decoration: none; ">129</a></li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">French - <a href="http://www-306.ibm.com/software/globalization/topics/keyboards/KBD189.jsp" style="text-decoration: none; ">189</a></li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">Spanish - <a href="http://www-306.ibm.com/software/globalization/topics/keyboards/KBD173.jsp" style="text-decoration: none; ">173</a></li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">Italian - <a href="http://www-306.ibm.com/software/globalization/topics/keyboards/KBD142.jsp" style="text-decoration: none; ">142</a></li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">Russian - <a href="http://www-306.ibm.com/software/globalization/topics/keyboards/KBD443.jsp" style="text-decoration: none; ">443</a></li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">Czech - <a href="http://www-306.ibm.com/software/globalization/topics/keyboards/KBD243.jsp" style="text-decoration: none; ">243</a></li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">Greek - <a href="http://www-306.ibm.com/software/globalization/topics/keyboards/KBD319.jsp" style="text-decoration: none; ">319</a></li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">Hebrew - <a href="http://www-306.ibm.com/software/globalization/topics/keyboards/KBD212.jsp" style="text-decoration: none; ">212</a></li></ul><p style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">24 other layouts are available in a separate layout pack that can be found in the <em>5-layout_pack</em> folder in the <a href="http://www.codeproject.com/KB/scripting/jvk/jvk_src.zip" style="text-decoration: none; ">archive</a>. It includes:</p><ul><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">European:<ul><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">Bulgarian - <a href="http://www-306.ibm.com/software/globalization/topics/keyboards/KBD442.jsp" style="text-decoration: none; ">442</a></li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">Czech - <a href="http://www.bohemica.com/czechonline/czechkeyboard/index.htm" style="text-decoration: none; ">alternative variant</a> of <a href="http://www.bohemica.com/" style="text-decoration: none; ">Bohemica.com</a></li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">Danish - <a href="http://www-306.ibm.com/software/globalization/topics/keyboards/KBD159.jsp" style="text-decoration: none; ">159</a> and <a href="http://www-306.ibm.com/software/globalization/topics/keyboards/KBD281.jsp" style="text-decoration: none; ">281</a></li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">Dutch - <a href="http://www-306.ibm.com/software/globalization/topics/keyboards/KBD143.jsp" style="text-decoration: none; ">143</a></li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">Estonian - <a href="http://www-306.ibm.com/software/globalization/topics/keyboards/KBD454.jsp" style="text-decoration: none; ">454</a></li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">Finnish - <a href="http://www-306.ibm.com/software/globalization/topics/keyboards/KBD153.jsp" style="text-decoration: none; ">153</a></li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">Hungarian - <a href="http://www-306.ibm.com/software/globalization/topics/keyboards/KBD208.jsp" style="text-decoration: none; ">208</a></li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">Icelandic - <a href="http://www-306.ibm.com/software/globalization/topics/keyboards/KBD197.jsp" style="text-decoration: none; ">197</a></li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">Latvian - <a href="http://www-306.ibm.com/software/globalization/topics/keyboards/KBD455.jsp" style="text-decoration: none; ">455</a></li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">Lithuanian - <a href="http://www-306.ibm.com/software/globalization/topics/keyboards/KBD456.jsp" style="text-decoration: none; ">456</a></li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">Macedonian - <a href="http://www-306.ibm.com/software/globalization/topics/keyboards/KBD449.jsp" style="text-decoration: none; ">449</a></li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">Norwegian - <a href="http://www-306.ibm.com/software/globalization/topics/keyboards/KBD155.jsp" style="text-decoration: none; ">155</a> and <a href="http://www-306.ibm.com/software/globalization/topics/keyboards/KBD281N.jsp" style="text-decoration: none; ">281N</a></li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">Polish - <a href="http://www-306.ibm.com/software/globalization/topics/keyboards/KBD214.jsp" style="text-decoration: none; ">214</a> and <a href="http://www-306.ibm.com/software/globalization/topics/keyboards/KBD457.jsp" style="text-decoration: none; ">457</a> (programmer's)</li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">Portuguese - <a href="http://www-306.ibm.com/software/globalization/topics/keyboards/KBD163.jsp" style="text-decoration: none; ">163</a></li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">Romanian - <a href="http://www-306.ibm.com/software/globalization/topics/keyboards/KBD446.jsp" style="text-decoration: none; ">446</a></li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">Serbian - <a href="http://www-306.ibm.com/software/globalization/topics/keyboards/KBD450.jsp" style="text-decoration: none; ">450</a> (cyrillic script)</li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">Serbo-Croatian/Slovene - <a href="http://www-306.ibm.com/software/globalization/topics/keyboards/KBD234.jsp" style="text-decoration: none; ">234</a> (Latin script)</li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">Slovak - <a href="http://www-306.ibm.com/software/globalization/topics/keyboards/KBD245.jsp" style="text-decoration: none; ">245</a></li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">Swedish - <a href="http://www-306.ibm.com/software/globalization/topics/keyboards/KBD285.jsp" style="text-decoration: none; ">285</a></li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">Ukrainian - <a href="http://www-306.ibm.com/software/globalization/topics/keyboards/KBD465.jsp" style="text-decoration: none; ">465</a></li></ul></li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">Asian:<ul><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">Arabic - <a href="http://www-306.ibm.com/software/globalization/topics/keyboards/KBD470.jsp" style="text-decoration: none; ">470</a></li></ul></li></ul><p style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">Please see the <em>readme.txt</em> file in the <em>5-layout_pack</em> folder in the archive for instructions regarding these layouts.</p></li></ul><h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 13pt; line-height: 1.2em; font-weight: bold; color: rgb(255, 153, 0); ">Creating Your Own Keyboard Layout</h2><p style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">You may wish to create a custom key layout. There are two ways to achieve this:</p><ol><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; "><p style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">Use <em>atm.js</em> as a template; it is the simplest script of <a href="http://www.codeproject.com/KB/scripting/jvk.aspx#variants" style="text-decoration: none; ">four</a>. See the <em>numpad_atm</em> folder in the <a href="http://www.codeproject.com/KB/scripting/jvk/jvk_src.zip" style="text-decoration: none; ">archive</a> for more details. In short, the script flow is as follows:</p><ul><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; "><a name="scriptflow" style="text-decoration: none; "><p style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">Create the outer box:</p></a><div id="premain16" class="small-text" style="font-size: 8pt !important; width: 991px; cursor: pointer; "><img id="preimg16" src="http://www.codeproject.com/images/minus.gif" height="9" width="9" preid="16" /><span id="precollapse16" preid="16" style="margin-bottom: 0px; "> Collapse</span></div><pre lang="jscript" id="pre16" style="background-color: rgb(251, 237, 187); padding-top: 7pt; padding-right: 7pt; padding-bottom: 7pt; padding-left: 7pt; font: normal normal normal 9pt/normal 'Courier New', Courier, mono; white-space: pre; overflow-x: auto !important; overflow-y: auto !important; margin-top: 0px; "><span class="code-keyword" style="color: blue; ">var</span> initX = <span class="code-digit" style="color: navy; ">0</span>, initY = <span class="code-digit" style="color: navy; ">0</span>;  ...  <span class="code-keyword" style="color: blue; ">var</span> kb = document.createElement(<span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">DIV"</span>); ct.appendChild(kb);  ct.style.display = <span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">block"</span>; ct.style.position = <span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">absolute"</span>; ct.style.top = initY + <span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">px"</span>, ct.style.left = initX +<span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">px"</span>;  kb.style.position = <span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">relative"</span>; kb.style.top = <span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">0px"</span>, kb.style.left = <span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">0px"</span>; kb.style.border = <span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">1px solid "</span> + bc;  <span class="code-keyword" style="color: blue; ">var</span> kb_main = document.createElement(<span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">DIV"</span>); kb.appendChild(kb_main);  kb_main.style.position = <span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">relative"</span>; kb_main.style.width = <span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">1px"</span>; kb_main.style.cursor = <span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">default"</span>; kb_main.style.backgroundColor = bkc;  ...</pre></li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; "><p style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">Create the keys with the <code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">_setup_key</code> method:</p><div id="premain17" class="small-text" style="font-size: 8pt !important; width: 991px; cursor: pointer; "><img id="preimg17" src="http://www.codeproject.com/images/minus.gif" height="9" width="9" preid="17" /><span id="precollapse17" preid="17" style="margin-bottom: 0px; "> Collapse</span></div><pre lang="jscript" id="pre17" style="background-color: rgb(251, 237, 187); padding-top: 7pt; padding-right: 7pt; padding-bottom: 7pt; padding-left: 7pt; font: normal normal normal 9pt/normal 'Courier New', Courier, mono; white-space: pre; overflow-x: auto !important; overflow-y: auto !important; margin-top: 0px; "><span class="code-keyword" style="color: blue; ">var</span> kb_pad_7 = <span class="code-keyword" style="color: blue; ">this</span>._setup_key(kb_main, <span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">1px"</span>,     <span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">1px"</span>, cp, cp, bc, c, lh, fs); kb_pad_7.sub.innerHTML = <span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">7"</span>; kb_pad_7.sub.id = container_id + <span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">___pad_7"</span>;</pre></li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; "><p style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">Route all output to the <code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">_generic_callback_proc</code> method. For the <code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">VATMpad</code> object, this is done in the <code style="color: rgb(153, 0, 0); font: normal normal normal 11pt/normal 'Courier New', Courier, mono; ">_set_key_state</code> method while refreshing the layout:</p><div id="premain18" class="small-text" style="font-size: 8pt !important; width: 991px; cursor: pointer; "><img id="preimg18" src="http://www.codeproject.com/images/minus.gif" height="9" width="9" preid="18" /><span id="precollapse18" preid="18" style="margin-bottom: 0px; "> Collapse</span></div><pre lang="jscript" id="pre18" style="background-color: rgb(251, 237, 187); padding-top: 7pt; padding-right: 7pt; padding-bottom: 7pt; padding-left: 7pt; font: normal normal normal 9pt/normal 'Courier New', Courier, mono; white-space: pre; overflow-x: auto !important; overflow-y: auto !important; margin-top: 0px; "><span class="code-keyword" style="color: blue; ">this</span>._setup_event(key_sub, <span class="code-string" style="color: purple; ">'</span><span class="code-string" style="color: purple; ">mousedown'</span>,     <span class="code-keyword" style="color: blue; ">this</span>._generic_callback_proc); </pre></li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; "><p style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">Invoke the callback function. This happens when the user "presses" a "key":</p><div id="premain19" class="small-text" style="font-size: 8pt !important; width: 991px; cursor: pointer; "><img id="preimg19" src="http://www.codeproject.com/images/minus.gif" height="9" width="9" preid="19" /><span id="precollapse19" preid="19" style="margin-bottom: 0px; "> Collapse</span></div><pre lang="jscript" id="pre19" style="background-color: rgb(251, 237, 187); padding-top: 7pt; padding-right: 7pt; padding-bottom: 7pt; padding-left: 7pt; font: normal normal normal 9pt/normal 'Courier New', Courier, mono; white-space: pre; overflow-x: auto !important; overflow-y: auto !important; margin-top: 0px; ">_generic_callback_proc: <span class="code-keyword" style="color: blue; ">function</span>(event) {     ...      <span class="code-keyword" style="color: blue; ">if</span>(val && vkboard.Callback)         vkboard.Callback(val); }</pre><p style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; "><img height="295" alt="Sample layout" hspace="0" src="http://www.codeproject.com/KB/scripting/jvk/jvk-cell.jpg" width="87" border="0" /></p></li></ul></li><li style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; "><p style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; "><a href="mailto:kh_dmitry2001@mail.ru?subject=Remote%20job%20offer" style="text-decoration: none; ">Hire me</a>. It is the best way to get a custom modification of a JavaScript Virtual Keyboard, specialized tuning and optimizations, pro support and fast, authoritative answers to JavaScript programming questions.</p></li></ol><a name="scale_issue" style="text-decoration: none; "></a><a name="editfull" style="text-decoration: none; "></a><h2 style="font-family: verdana, helvetica, arial, sans-serif; font-size: 13pt; line-height: 1.2em; font-weight: bold; color: rgb(255, 153, 0); ">Call from Beyond</h2><p style="font-family: verdana, helvetica, arial, sans-serif; font-size: 10pt; line-height: 1.2em; ">One natural feature that all users expect from a text field is the ability to edit the text at any position within a field. However, it is impossible to do so with a function described <a href="http://www.codeproject.com/KB/scripting/jvk.aspx#editsimple" style="text-decoration: none; ">earlier</a>, which only appends symbols to or removes from the end of the text. The following script is an attempt to write a compatible callback function to fulfill the described task. It is largely based on the <a href="http://www.thescripts.com/forum/thread150536.html" style="text-decoration: none; ">discussion</a> in the <a href="http://www.thescripts.com/" style="text-decoration: none; ">thescripts.com</a> forum.</p><div id="premain20" class="small-text" style="font-size: 8pt !important; width: 1071px; cursor: pointer; "><img id="preimg20" src="http://www.codeproject.com/images/minus.gif" height="9" width="9" preid="20" /><span id="precollapse20" preid="20" style="margin-bottom: 0px; "> Collapse</span></div><pre lang="jscript" id="pre20" style="background-color: rgb(251, 237, 187); padding-top: 7pt; padding-right: 7pt; padding-bottom: 7pt; padding-left: 7pt; font: normal normal normal 9pt/normal 'Courier New', Courier, mono; white-space: pre; overflow-x: auto !important; overflow-y: auto !important; margin-top: 0px; "><head>     <script type="<span" class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">text/javascript"</span>><!--      <span class="code-keyword" style="color: blue; ">var</span> opened = <span class="code-keyword" style="color: blue; ">false</span>,         insertionS = -1,  <span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; ">//</span><span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; "> selection start</span>          insertionE =  <span class="code-digit" style="color: navy; ">0</span>;  <span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; ">//</span><span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; "> selection end</span>       <span class="code-keyword" style="color: blue; ">var</span> userstr = navigator.userAgent.toLowerCase();     <span class="code-keyword" style="color: blue; ">var</span> safari = (userstr.indexOf(<span class="code-string" style="color: purple; ">'</span><span class="code-string" style="color: purple; ">applewebkit'</span>) != -1);     <span class="code-keyword" style="color: blue; ">var</span> gecko  = (userstr.indexOf(<span class="code-string" style="color: purple; ">'</span><span class="code-string" style="color: purple; ">gecko'</span>) != -1) && !safari;     <span class="code-keyword" style="color: blue; ">var</span> standr = gecko || window.opera || safari;      ...      <span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; ">//</span><span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; "> Advanced callback function:</span>     <span class="code-comment" style="color: rgb(0, 128, 0); font-style: italic; ">//</span>      <span class="code-keyword" style="color: blue; ">function</span> keyb_callback(ch)     {         <span class="code-keyword" style="color: blue; ">var</span> val = text.value;          <span class="code-keyword" style="color: blue; ">switch</span>(ch)         {             <span class="code-keyword" style="color: blue; ">case</span> <span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">BackSpace"</span>:             <span class="code-keyword" style="color: blue; ">if</span>(val.length)             {                 <span class="code-keyword" style="color: blue; ">var</span> span = <span class="code-keyword" style="color: blue; ">null</span>;                  <span class="code-keyword" style="color: blue; ">if</span>(document.selection)                 span = document.selection.createRange().duplicate();                  <span class="code-keyword" style="color: blue; ">if</span>(span && span.text.length > <span class="code-digit" style="color: navy; ">0</span>)                 {                     span.text = <span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">"</span>;                     getCaretPositions(text);                 }                 <span class="code-keyword" style="color: blue; ">else</span>                 deleteAtCaret(text);             }             <span class="code-keyword" style="color: blue; ">break</span>;              <span class="code-keyword" style="color: blue; ">case</span> <span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; "><"</span>:                 <span class="code-keyword" style="color: blue; ">if</span>(insertionS > <span class="code-digit" style="color: navy; ">0</span>)                 setRange(text, insertionS - <span class="code-digit" style="color: navy; ">1</span>, insertionE - <span class="code-digit" style="color: navy; ">1</span>);             <span class="code-keyword" style="color: blue; ">break</span>;              <span class="code-keyword" style="color: blue; ">case</span> <span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">>"</span>:                 <span class="code-keyword" style="color: blue; ">if</span>(insertionE < class="code-digit" style="color: navy; ">1</span>, insertionE + <span class="code-digit" style="color: navy; ">1</span>);             <span class="code-keyword" style="color: blue; ">break</span>;              <span class="code-keyword" style="color: blue; ">case</span> <span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">/\\":                 if(!standr) break;                 var prev  = val.lastIndexOf("</span>\n<span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">, insertionS) + 1;                 var pprev = val.lastIndexOf("</span>\n<span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">, prev - 2);                 var next  = val.indexOf("</span>\n<span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">, insertionS);                  if(next == -1) next = val.length;                 var nnext = next - insertionS;                  if(prev > next)                 {                     prev  = val.lastIndexOf("</span>\n<span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">, insertionS - 1) + 1;                     pprev = val.lastIndexOf("</span>\n<span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">, prev - 2);                 }                  // number of chars in current line to the left of the caret:                 var left = insertionS - prev;                  // length of the prev. line:                 var plen = prev - pprev - 1;                  // number of chars in the prev. line to                 // the right of the caret:                 var right = (plen <= left) ? 1 : (plen - left);                  var change = left + right;                 setRange(text, insertionS - change, insertionE - change);              break;              case "</span>\\/<span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">:                 if(!standr) break;                  var prev  = val.lastIndexOf("</span>\n<span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">, insertionS) + 1;                 var next  = val.indexOf("</span>\n<span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">, insertionS);                 var pnext = val.indexOf("</span>\n<span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">, next + 1);                  if( next == -1)  next = val.length;                 if(pnext == -1) pnext = val.length;                  if(pnext < pnext =" next;"> next)                 prev  = val.lastIndexOf("</span>\n<span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">, insertionS - 1) + 1;                  // number of chars in current line to the left of the caret:                 var left = insertionS - prev;                  // length of the next line:                 var nlen = pnext - next;                  // number of chars in the next line to the left of the caret:                 var right = (nlen <= left) ? 0 : (nlen - left - 1);                  var change = (next - insertionS) + nlen - right;                 setRange(text, insertionS + change, insertionE + change);              break;              default:                 insertAtCaret(text,                    (ch == "</span>Enter<span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; "> ? (window.opera ? '\r\n' : '\n') : ch));             }         }     }      // This function retrieves the position (in chars, relative to     // the start of the text) of the edit cursor (caret), or, if     // text is selected in the TEXTAREA, the start and end positions     // of the selection.     //     function getCaretPositions(ctrl)     {         var CaretPosS = -1, CaretPosE = 0;          // Mozilla way:         if(ctrl.selectionStart || (ctrl.selectionStart == '0'))         {             CaretPosS = ctrl.selectionStart;             CaretPosE = ctrl.selectionEnd;              insertionS = CaretPosS == -1 ? CaretPosE : CaretPosS;             insertionE = CaretPosE;         }         // IE way:         else if(document.selection && ctrl.createTextRange)         {             var start = end = 0;             try             {                 start =                     Math.abs(                     document.selection.createRange().moveStart("</span>character<span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">,                     -10000000)); // start                  if (start > 0)                 {                     try                     {                         var endReal =                             Math.abs(                             ctrl.createTextRange().moveEnd("</span>character<span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">,                             -10000000));                          var r = document.body.createTextRange();                         r.moveToElementText(ctrl);                         var sTest =                             Math.abs(r.moveStart("</span>character<span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">, -10000000));                         var eTest =                             Math.abs(r.moveEnd("</span>character<span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">, -10000000));                          if((ctrl.tagName.toLowerCase() != 'input') &&                             (eTest - endReal == sTest))                             start -= sTest;                     }                     catch(err) {}                 }             }             catch (e) {}              try             {                 end =                     Math.abs(                     document.selection.createRange().moveEnd("</span>character<span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">,                     -10000000)); // end                 if(end > 0)                 {                     try                     {                         var endReal =                             Math.abs(                             ctrl.createTextRange().moveEnd("</span>character<span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">,                             -10000000));                          var r = document.body.createTextRange();                         r.moveToElementText(ctrl);                         var sTest =                             Math.abs(r.moveStart("</span>character<span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">, -10000000));                         var eTest =                             Math.abs(r.moveEnd("</span>character<span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">, -10000000));                          if ((ctrl.tagName.toLowerCase() != 'input') &&                             (eTest - endReal == sTest))                              end -= sTest;                     }                     catch(err) {}                 }             }             catch (e) {}              insertionS = start;             insertionE = end         }     }      function setRange(ctrl, start, end)     {         if(ctrl.setSelectionRange) // Standard way (Mozilla, Opera, ...)         {             ctrl.setSelectionRange(start, end);         }         else // Microsoft Internet Explorer         {             var range;              try             {                 range = ctrl.createTextRange();             }             catch(e)             {                 try                 {                     range = document.body.createTextRange();                     range.moveToElementText(ctrl);                 }                 catch(e)                 {                     range = null;                 }             }              if(!range) return;              range.collapse(true);             range.moveStart("</span>character<span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">, start);             range.moveEnd("</span>character<span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">, end - start);             range.select();         }          insertionS = start;         insertionE = end;     }      function deleteSelection(ctrl)     {         if(insertionS == insertionE) return;          var tmp =             (document.selection &&             !window.opera) ? ctrl.value.replace(/\r/g,"</span><span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">) : ctrl.value;         ctrl.value =             tmp.substring(0, insertionS) + tmp.substring(insertionE,             tmp.length);          setRange(ctrl, insertionS, insertionS);     }      function deleteAtCaret(ctrl)     {         if(insertionS != insertionE)         {             deleteSelection(ctrl);             return;         }          if(insertionS == insertionE)         insertionS = insertionS - 1;          var tmp =             (document.selection &&             !window.opera) ? ctrl.value.replace(/\r/g,"</span><span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">) : ctrl.value;         ctrl.value =             tmp.substring(0,             insertionS) + tmp.substring(insertionE, tmp.length);          setRange(ctrl, insertionS, insertionS);     }      // This function inserts text at the caret position:     //     function insertAtCaret(ctrl, val)     {         if(insertionS != insertionE) deleteSelection(ctrl);          if(isgecko && document.createEvent && !window.opera)         {             var e = document.createEvent("</span>KeyboardEvent<span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">);              if(e.initKeyEvent && ctrl.dispatchEvent)             {                 e.initKeyEvent("</span>keypress<span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">, // in DOMString typeArg,                     false,                 // in boolean canBubbleArg,                     true,                  // in boolean cancelableArg,                     null,                  // in nsIDOMAbstractView viewArg,                     false,                 // in boolean ctrlKeyArg,                     false,                 // in boolean altKeyArg,                     false,                 // in boolean shiftKeyArg,                     false,                 // in boolean metaKeyArg,                     null,                  // key code;                     val.charCodeAt(0));    // char code.                  ctrl.dispatchEvent(e);             }         }         else         {             var tmp =                 (document.selection &&                 !window.opera) ? ctrl.value.replace(/\r/g,"</span><span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">) : ctrl.value;             ctrl.value =                 tmp.substring(0,                 insertionS) + val + tmp.substring(insertionS,                 tmp.length);         }          setRange(ctrl, insertionS + val.length, insertionS + val.length);     }     //--></script>  </head>  <body>      ...      <-- Don't forget this 'onclick' and 'onkeyup': -->     <textarea onkeyup="">getCaretPositions(<span class="code-keyword" style="color: blue; ">this</span>);<span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">         onclick="</span>getCaretPositions(<span class="code-keyword" style="color: blue; ">this</span>);<span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">          id="</span>textfield<span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; "> rows="</span><span class="code-digit" style="color: navy; ">12</span><span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; "> cols="</span><span class="code-digit" style="color: navy; ">50</span><span class="code-string" style="color: purple; ">"</span><span class="code-string" style="color: purple; ">>           ...

Note that the up and down arrows on a virtual keyboard work only on standards-compliant browsers! Take this into account when creating touch screen applications. You can test the above script by running the 2-edit-full.html file found in the vkboard folder of the attached archive. Basic callback is demonstrated in 1-edit-simple.html.

Tips and Tricks

Script flow is quite straightforward, so I hope it won't be hard to dive into it. Here are a couple of words on a few tricky places.

Event set-up. We need to handle both Microsoft Internet Explorer and W3C DOM event models:

Collapse

_setup_event: function(elem, eventType, handler) {     return (elem.attachEvent ? // Microsoft Internet Explorer way          elem.attachEvent("on" + eventType, handler) :         ((elem.addEventListener) ? // W3C way          elem.addEventListener(eventType, handler, false) : null)); }

Key container set-up. Each key consists of the "outer" DIV -- where we set the top, left, width and height parameters only -- and the "inner" DIV, which accepts padding, border color and other parameters. We use such a complex construction to circumvent the box model problem of modern browsers. Note that there is the JavaScript solution. If you wish to avoid the box model problem using CSS, you may wish to see the article by Trenton Moss (see item #6).

Collapse

_setup_key: function(parent, id, top, left, width, height,     text_align, line_height, font_size,     font_weight, padding_left, padding_right) {     var exists = document.getElementById(id);      // Outer DIV:      var key =         exists ? exists.parentNode : document.createElement("DIV");     this._setup_style(key,         !exists, top, left, width, height, "absolute");      // Inner DIV:      var key_sub = exists ? exists : document.createElement("DIV");     key.appendChild(key_sub); parent.appendChild(key);      this._setup_style(key_sub,         !exists, "", "", "", line_height, "relative",         text_align, line_height, font_size, font_weight,         padding_left, padding_right);         key_sub.id = id;      return key_sub; }

Disabling content selection. This one is very important due to the very high typing speed that some people can achieve and, as a result, the inevitable vkeyboard content selection. It can be used instead of the UNSELECTABLE (Microsoft Internet Explorer) and -moz-user-select (Gecko-based browsers) properties.
Collapse
```
this._setup_event(kb_main, "selectstart",     function(event)     {         return false;     }); this._setup_event(kb_main, "mousedown",     function(event)     {         if(event.preventDefault)             event.preventDefault();         return false;     }); 
```

Code

Virtual Keyboard Features at a Glance

A complete JavaScript toolkit suitable for simulating every single aspect of a real keyboard device
Compact (42.8 KB - compressed full variant) script that doesn't require any images, for faster download
Works and looks the same way on all mainstream browsers, tested on Mozilla Firefox 1.5/2, Opera 7.5/9.22, Safari 3, Microsoft Internet Explorer 6/7
Very simple set-up procedure
Self-contained, with no external dependencies
Customizable font, font size and colors; perfect for skinable environments
Several variants are available, including full keyboard, slim full keyboard, numpad and ATM-style numpad
Compressed scripts are bundled, i.e. full script: 42.8 KB, slim: 43 KB, numpad: 9.30 KB, atm-numpad: 8.62 KB
Ten frequently used keyboard layouts are bundled with the full and slim scripts, 24 more layouts are in the provided layout pack
Flexible installation options, i.e. any number of vkeyboards per page, adjustable callbacks
Open-source script distributed under the zlib/libpng license, meaning that it can be used free of charge even on commercial sites

Script Requirements

Any browser that is aware of:

JavaScript (implementation compliant with ECMAScript Edition 3)
W3C DOM Level 1
CSS Level 1 (at least, most of the elements)
W3C or Microsoft Internet Explorer event model

Links

W3C
Wikipedia
Other
- QuirksMode.org - #1 source of compatible scripts
- Douglas Crockford's Javascript - collection of great articles on JavaScript
- Richard Cornford's JavaScript articles - some very advanced articles
- JavaScriptKit.com - references, tutorials, etc.
- Table of Unicode values on Coeurlumiere.com
- IBM Globalization Database - index of keyboard layouts

History

April 10^th, 2006
- First version, English layout only
April 14^th, 2006
- Code refined
- Russian, German, French, and Czech layouts added
April 22^nd, 2006
- Second code revision, much more compact and robust code
- Spanish, Italian, and Greek layouts added
May 14^th, 2006
- Third code revision, even more robust and error-proof code
- Canadian (multilingual standard) and Hebrew layouts added
- "AltGr" key and appropriate layout variants added
- German, French, Spanish, and Greek layouts fixed
- "Caps Lock" + "Shift" case switching fixed
- Language menu positioning issue fixed
- Moved from manual to on-focus switching in the "test2" example
May 16^th, 2006
- All "box model"-related issues solved
June 12^th, 2006
- Most layouts revised and fixed
- Minor language menu issue fixed
- Pilot implementation of the dead keys subsystem
August 28^th, 2006
- Keyboard now pops over the page rather than embedding into it
- Keyboard font size can now be specified, keyboard scales uniformly with font size
- Keyboard colors can now be customized
- Shift and AltGr keys now deactivate after alphanumeric key has been pressed
- Fixed an obscure language menu bug sometimes occurring in Microsoft Internet Explorer
- Compressed version of script is now bundled in the archive
- Minor code changes and cleanups, too numerous to be listed
September 14^th, 2006
- First attempt to write an advanced callback function, which allows (I hope) a natural experience with the TEXTAREA
- "test1" sample has been split into edit_simple and edit_full
October 4^th, 2006
- Numpad-only -- 2 variants -- scripts are now bundled in the archive
- [full keyboard] Fixed problem with an improper cursor positioning when used with Hebrew in edit_simple sample
- [full keyboard] Many corrections to Greek layout; letters with acute, umlaut and Dialytika Tonos accents are now available
- [full keyboard] Added optional switch to ShowVKeyboard, that allows you not to create the numpad
October 16^th, 2006
- [full keyboard] Dead-keys subsystem reworked
- [all variants] Slightly more compact and clean code
October 26^th, 2006
- Popup-tuned variant of the vkeyboard created
- [all variants] Key parts of the script were rewritten, resulting in smaller and faster code
- [all variants] Fixed the annoying issue with key text selection when "typing" fast, due to eventual drag 'n' drop
- [all variants] Got rid of all browser detection code
- [full keyboard] Advanced callback function was rewritten; works OK with Microsoft Internet Explorer 6, Firefox 1.5, Opera 9 and Netscape 8.1
November 16^th, 2006
- [full keyboard] "test_fly_anonym" sample added
- [full/popup keyboard] 'new shekel' symbol added to the Hebrew layout
- [full/popup keyboard] Language names in the language menu were rewritten in the languages they represent
December 22^nd, 2006
- [full/popup keyboard] Fixed an issue with the transparent background of the language drop-down menu
- [full/popup keyboard] Fixed an issue with the language menu not receiving the same font color as the rest of the keyboard
- [full/popup keyboard] Fixed an issue with the Russian language designator sometimes shown with odd characters
- [numpad/ATM-numpad] Optimizations and code size reductions
- [all variants] "Background color" separated into "keyboard base color" and "keys' background color"
- [all variants] Keyboard font can now be specified
- [all variants] Further preparations to the next milestone release
January 12^th, 2007
- *** Version 2 - interface is incompatible with previous releases ***
- [all variants] Code refactored and rewritten in an object-oriented fashion, new API, no global variables exposed
- [all variants] Massive code optimizations, especially in _refresh_layout and _construct (former ShowVKeyboard) methods
- [all variants] Usage of the eval function was reduced to the absolute minimum: 6 calls in the beginning of _refresh_layout
- [all variants] Callback function and all visual parameters now can be adjusted at run-time
- [all variants] Callback function is now stored by reference, not by name
- [all variants] Callback function now can accept a second parameter
- [all variants] As a result of refactoring, script now runs up to 30% faster
- [all variants] Font size can now be specified with any absolute or relative CSS length unit (experimental plug-in; see note)
- [all variants] Fixed bug when script calculated erroneous padding when changing font size
- [all variants] Resolved issue with Microsoft Internet Explorer /Mozilla font scaling
- [full/popup keyboard] Numpad can now be shown/hidden at run-time
- [full/popup keyboard] Fixed issues with "Enter" key misalignment and glitches
- [full/popup keyboard] Fixed bug with numpad keys' misalignment when changing font size
- [full/popup keyboard] Fixed bug when AltGr didn't shadow when Shift was pressed and _alt_gr_shift array was not defined
- [full keyboard] test_any_css , test_change and test_scale samples added
- [full keyboard] All samples renamed to form a more consistent test suite
- [full keyboard] More comments written in all sample installations
- [popup keyboard] Popup variant is no longer bound to 2 rows per 5 languages each - adaptive configuration
- changelog.txt (version history) and how-to-compress.txt (obfuscation procedure) files are now shipped with the archive
February 6^th, 2007
- [full/popup keyboard] Fixed bug with dead_color parameter not affecting dead keys' color
- [full/popup keyboard] Breve, DotAbove, DoubleAcute, Macron, and Ogonek diacritic arrays added
- [full/popup keyboard] Acute, Grave, and Tilde diacritic arrays corrected
- [ATM-numpad] Fixed erroneous sample
- [all variants] Better advanced callback function:
  - Fixed bug with improper deletion of multiple characters at once (Mozilla, Opera, Netscape, Microsoft Internet Explorer)
  - Fixed bug with improper character replacements (Microsoft Internet Explorer)
  - Plays better with INPUT fields of type="text"
February 14^th, 2007
- *** Version 2.2 - interface is incompatible with previous releases ***
- [full keyboard] First release of the layout pack; see list
- [full keyboard] Fixed bugs in advanced callback function that were introduced in the previous release
- [full keyboard] Macron diacritic array moved to a separate file
- [full/popup keyboard] New parameter added - background color for the inactive keys
- [full/popup keyboard] Built-in Czech layout now matches one in IBM layout database, older variant moved to the layout pack
- [full/popup keyboard] Built-in Hebrew layout now matches one in IBM layout database for normal/casp/shift parts
March 26^th, 2007:
- [all variants] Major code cleanup (no evals now!), much cleaner and, generally, faster code
- [all variants] "keys" can now flash on click, flash colors are customizable
- [all variants] Virtual keyboard can now either embed into the page or float over the content
- [all variants] More parameters added (5 to constructor, 4 to SetParameters method) to control the above two features
- [all variants] Fixed some key text selection issues
- [full keyboard] Advanced callback function is now (almost) perfect
- [full/popup keyboard] Reserved keys fired symbol when pressed, fixed
- [layout pack] Arabic (470) layout added
- [layout pack] All layout files reformatted to be more readable
July 12^th, 2007:
- [full keyboard] Translator script added, scripts starting from 4th renamed to encompass this new test case
- [full keyboard] 3rd input field in '5-test-fly' and '6-test-fly-anonym' was replaced by a TEXTAREA
- [full keyboard] Advanced callback function fixed once again (we'll get it right eventually...)
- [popup keyboard] "popup" variant renamed to "slim", popup sample was dropped due to its poor usability
- [full/slim keyboard] You can now specify the index of the start-up layout
- [full/slim keyboard] You can change the layout programmatically with SetParameters function
- [all variants] You can now specify if there will be a 1-pixel gap between the keys
- [all variants] Advanced callback function is now the base for all test cases
- [all variants] Most test cases now make use of backfocus function to address the 'lost focus' annoyance
- [all variants] Obfuscation procedure was significantly simplified
- [all variants] Fixed the use of static kbArray variable (doesn't affect you if you're using 1 vkeyboard per page)
July 18^th, 2007
- [all variants] Minor optimizations
- [layout pack] Dutch, Icelandic and Portuguese layouts added
July 24^th, 2007
- *** Version 2.6 - interface is incompatible with previous releases ***
- [full/slim keyboard] Arrow keys can now be shown on vkeyboard creation
- [full/slim keyboard] Advanced callback function modified to accommodate arrow keys
- [all variants] Obfuscation procedure was simplified even more
March 26^th, 2008

[full/slim keyboard] Fixed bug with vkeyboard collapse when using arrow keys and the numpad
[all variants] Fixed issue with eventual missing of clicks (= VKeyboard is now perfectly usable by touch-screen users)
[all variants] Cleared the copyright issue with a DocumentSelection library by Ilya Lebedev
[all variants] Obfuscation procedure was simplified once again

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Dmitry Khudorozhkov

Member

Dmitry Khudorozhkov began programming (and gaming) with his ZX Spectrum in 1989. Having seen and used all IBM PCs from early XT to the latest x64 machines, now Dmitry is a freelance programmer, 27 years old, living in Moscow, Russia. He is a graduate of the Moscow State Institute of Electronics and Mathematics (Applied Mathematics).

He is proficient in:

- C/C++ - more that 9 years of experience. Pure Win32 API/MFC desktop programming, networking (BSD/Win sockets), databases (primarily SQLite), OpenGL;

- JavaScript - more that 6 years of experience. Client-side components, AJAX, jQuery installation and customization;

- Firefox extensions (immediatelly ready for addons.mozilla.org reviewing) and Greasemonkey scripts. As an example of extensions Dmitry made you can search for FoxyPrices or WhatBird Winged Toolbar;

- XML and it's applications (last 2 years): XSLT (+ XPath), XSD, SVG, VML;

- ASP.NET/C# (webservices mostly);

Also familiar with (= entry level):

- PHP;

- HTML/CSS slicing.

Trying to learn:

- Ruby/Ruby-on-Rails;

- Czech language.

If you wish to express your opinion, ask a question or report a bug, feel free to e-mail:dmitrykhudorozhkov@yahoo.com. Job offers are warmly welcome.

If you wish to donate - and, by doing so, support further development - you can send Dmitry a bonus through the Rentacoder.com service (registration is free, Paypal is supported). Russian users can donate to the Yandex.Money account 41001132298694.

-

Occupation:	Software Developer
Company:	Freelance software engineer
Location:	Russian Federation

1 comment:

Ella Eva said...: Sharkoon RGB Flow Gaming Case in UAE, ATX Gaming Case in UAE, Gaming Case in UAE
https://gccgamers.com/sharkoon-rgb-flow.html
Sharkoon Flow Case in UAE, Safe Shopping Multiple Payment Options Express Delivery GCC Gamers Moneyback Guarantee.
1632379812120-9; September 22, 2021 at 11:50 PM

DotNet Blog

Wednesday, April 7, 2010

JavaScript Virtual Keyboard

Introduction

Setup

Tips and Tricks

Code

Virtual Keyboard Features at a Glance

Script Requirements

Links

History

License

About the Author

1 comment:

Followers

About Me