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.

Setup

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.

The callback function must have one or two parameters. The first parameter is mandatory and accepts a string value returned by the vkeyboard script. The second parameter is optional and accepts the id 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 later.

Define a container for the keyboard, which must be an empty DIV or SPAN.

<a name=""""set-param"""">SetParameters</a>: 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.

1-edit-simple.html: The most basic installation of the JavaScript Virtual Keyboard.

2-edit-full.html: Almost the same as above, but the keyb_callback function is not so simple as it was. While simple installation only appends or deletes characters from the end of the text in a TEXTAREA, 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.

3-edit-translator.html: 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.

4-test-change.html: Sample illustrates the use of the SetParameters API. Watch how vkeyboard changes its color.

5-test-fly.html: Sample shows how to handle multiple INPUT fields with a single vkeyboard.

6-test-fly-anonym.html: Almost the same as above, but INPUT fields are allowed to omit the id property. Can be very useful for introducing vkeyboard into existing sites/pages where page changes are undesirable.

7-test-any-css.html: Sample shows how to set the vkeyboard font size with units other than pixels. A special function, convert_to_px, is used to convert arbitrary unit strings to pixel-based values. The following units are allowed: px, %, em, ex, pt, pc, cm, mm and in. Note that the convert_to_px function is still quite experimental. The main problem is that only the Microsoft Internet Explorer browser provides a way -- via the window.screen.logicalXDPI property -- to retrieve the current screen DPI setting, which is used to convert from absolute to relative length units. With any other browser, only px, %, em and ex 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.

8-test-scale.html: 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 font-size style set explicitly. The Mozilla browser has a similar problem: it does change the font-size, but does not change the dimensions of the text's container element. In this sample, script tracks the changes to the base font-size and uses the SetParameters 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, MyIE2 (Maxthon) also implements a smart zoom. There are also rumors that the Firefox 3 browser will feature an Opera-like page zoom behaviour.

Note that all of the above samples can be found in the vkboard folder of the source archive. 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.

Creating Your Own Language Layout

Two easy steps:

Append the avail_langs array with a two-member array consisting of the language abbreviation -- usually an ISO 639-1 language code -- and the layout name written in that language, using Unicode hex values where required.

Each array's name must begin with the language abbreviation and the underscore symbol.

Names of arrays with values representing symbols for a keyboard with "Caps Lock" pressed must end with caps.

// Czech layout:
Cz_caps: ["&#x003B;", ... , "&#x002D;"];

Names of arrays with values representing symbols for a keyboard with "Shift" pressed must end with shift.

Cz_shift: ["&#x00BA;", ... , "&#x005F;"];

Names of arrays with values representing symbols for a keyboard with "AltGr" pressed must end with alt_gr.

Cz_alt_gr: [..., "&#x0021;", "&#x002F;"];

Names of arrays with values representing symbols for a keyboard with the "AltGr" and "Shift" keys pressed must end with alt_gr_shift.

Cz_alt_gr_shift: ["&#x007E;", ... , "&#x003F;"];

Names of arrays with values representing symbols for a keyboard's normal condition -- i.e. with no modifier keys pressed -- must end with normal.

Cz_normal: ["&#x003B;", ... , "&#x002D;"];

Each array must have exactly 48 entries, each containing either the hexadecimal value 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:

Acute (?)

Breve (?)

Caron (?)

Cedilla (?)

Circumflex (^)

DialytikaTonos (?, dialytika tonos, combined acute + umlaut)

DotAbove (?, dot above)

DoubleAcute (?, double acute)

Grave (`)

Ogonek (?)

RingAbove (°, ring above)

Tilde (~)

Umlaut (?)

Also, the Macron (¯) diacritic array is available via the macron.txt file in the 1-vkboard folder of the archive. It is not included to the main script because no layout I know implements it as a dead key.

Hire me. 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.

Call from Beyond

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 earlier, 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 discussion in the thescripts.com forum.

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.

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).

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.

Share

About the Author

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, living in Moscow, Russia. He is a graduate of the Moscow State Institute of Electronics and Mathematics (Applied Mathematics).

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.

Comments and Discussions

i want to develope telugu virtual keyword..i read this article..in this no telugu font..for adding telugu language,how can get the telugu related hex code telugu letters to add in avail_langs array?please give the guidance..

I have used this keyboard in my LogIn page of ASP.NET app (3.5 framework), but , there are many other customization like,

I want to disable at first load, I am using checkbox to enable/disable keyboard, restricting txtbox which is bind to this keyboard for only 10 char,

In all these cases I am facing issues like1. Nothing is working in Firefox (Major) ( not even get bind to textbox )2. Enable/disabe not working in chrome (Major) ( neither Javascript nor JQuery ) ( some other JS are working, like alert, checkbox event etc, ) ( I am even not able to debug JS )

Hey. First of all, thanks for this. I just unzipped these, opened up all of them in Firefox. Only the edit-simple example works. All the others, when you click the keyboard, the key flashes oranges but the letter does not appear in the text field. They all work in IE8. Any ideas? Im not versed in javascript.. Maybe Firefox is blocking something?

(Edit: oops, just saw this bug reported below. I'll leave this up for visibility)

I have downloaded this several times and have no idea how or if it works at all. Once I try opening a file I cannot back up to try anything else. You need a user-friendly guide for consumers not programmers.

My javascript skills aren't that good so i'm looking for some help. How do i embed the Virtual Keyboard (vatmpad.js) into my existing ASP page. What i want to do is to be able to click on an input box, the keyboard pop up, enter whatever data via the onscreen keyboard, press enter on that keyboard and the keyboard pass that value to the input box. I'm creating a kiosk of sorts without a keyboard or mouse. Whatever help you can give would be great. Thanks...

I was having no luck getting the translate function to work with Chrome. However after bit of Googling I made this hack which is UGLY but works.It seems you have to use initKeyboardEvent instead of initKeyEvent for things to work in Chrome.I made the following changes beginning at line 438 of edit-translator.html

if(userstr.indexOf('chrome') > -1){ var e = document.createEvent("KeyboardEvent"); e.initKeyboardEvent .... the rest is the same to line 451}else{repeat the original block beginning at line 438 to 451}This makes the change only on Chrome browsers since this change seems to break all other browsers.Not pretty but it works.FWIWTom