JavaScript VirtualKeyboard

• 3.6.1
• Download full package - 990 KB
• Download compacted package - 945 KB
• Download lite package - 268 KB
• Download TinyMCE plug-in package - 944 KB
• Download TinyMCE 3 plug-in package - 944 KB
• Download Xinha plug-in package - 942 KB

Differences between the packages:

Full:

Contains the development release, as is. It includes layouts sources and setup utility.

Compact:

Has the same features as the full release, but all scripts are packed and obfuscated with Tricky Scripter.

Lite:

Has all scripts packed, as in the Compact package, and does not include setup utility and layouts sources.

TinyMCE, TinyMCE 3, Xinha:

Plug-in for the corresponding WISIWYG editors, built from the Compact package.

Introduction

Virtual Keyboard is a great tool when you can't install or use additional keyboard layouts bundled with your OS. For example, you're at the internet cafe where only En/US layout is available and you want to write some letters to your Russian, Korean, or Japanese friends. Yes, you can just transliterate your writing, but this will take much more time than you would ever expect, and makes reading boring.

If this is the case, open the VirtualKeyboard site and begin typing. It will make the text input as comfortable, as with the native keyboard layout.

You might want to integrate such a keyboard in your own application, like in your search engine, forum, webmail system, or something else. This is a wise decision - a tiny app will make life easier for you and your customers.

Virtual Keyboard features

• Full keyboard and mouse input - you can use them even together, pressing keys and press Alt on the keyboard and click mouse on the virtual buttons
• Support for MS Keyboard Layout Creator for easy creation of new layouts
• Support for CSS skins to customize keyboard look
• Support for left-to-right and right-to-left scripts, automatically switching to the appropriate one
• Full-featured keyboard input with support for AltGr and SGCaps character sets
• Support for RichText editors
• Support for Chinese, Japanese, Korean, Lakhota, and a lot of other IME's
• List of supported layouts contains more than 160 layouts

Using the code

Including keyboard on the page

1. Add the following line to the head:

<SCRIPT src="vk_loader.js" type="text/javascript"></SCRIPT>

vk_loader.js has two optional params:

vk_skin

points to the folder in the /css/ directory, which contains skin definitions

vk_layout

pass layout name to enable on the start, default is the first loaded one

Example:

<SCRIPT src="vk_loader.js?vk_layout=AM%20Armenian%20Eastern&vk_skin=soberTouch" 
        type="text/javascript"></SCRIPT>

2. Add the following lines at the page with the text fields:

VirtualKeyboard.toggle('target_input_field_id','keyboard_holder_id');

I.e., I use it in the event handler to open the keyboard on button click

Yes, that's all. No need to write any custom code, or whatever else. The solution is really solid.

Using IME input

Let's type 'hello' - ni hao - in Chinese using the Chinese Pinyin layout. Assume, you've opened a page with keyboard and selected a pinyin layout from the keyboard dropdown list.

• Typing any symbol, recognized as a hieroglyph start, you'll see a popup tool with the available suggestions. Type 'n'.



• The following typed symbol will reduce the list of available hieroglyphs. Type 'i' (ni).



• Pressing a digit, you'll choose one of the available hieroglyphs from the IME popup. Pressing 'Enter' or any key, which is not recognized as a part of hieroglyph, will insert the default (first) hieroglyph and begin matching the hieroglyphs with the last symbol. Type 'h' (nih).



• Type 'a' and 'o' (niha and nihao, respectively).





• Press '1' or 'Enter' to complete the input. 你好 is 'hello'.

The same applies to other IMEs, they might have or have no toolbar, but they will work in mostly the same way.

Setup layouts

Most often, you have no need for all the layouts, and then you can make a smaller pack.

Local setup

1. Launch the /setup/in/setup.html script in IE6 or IE7
2. Select the desired layouts and press the 'Process selected' button
3. Copy the layouts from /setup/out/layouts.js to /layouts/layouts.js

Server setup (PHP required)

1. Launch the /setup/in/setup.php script
2. Select the desired layouts, and select the 'Install' checkbox
3. Check the 'install' checkbox to attempt to copy the layouts from /setup/out/layouts.js to /layouts/layouts.js
4. Press the 'Process selected' button

That's it. If you don't see any error messages, then you've successfully created a new layouts bundle.

Developing new layouts

Beginning

Any new layout should be described in a .klc file, built using the Microsoft Keyboard Layout Creator tool. Using this, you'll assign letters and symbols to the keyboard keys, then save it to a .klc file in the /setup/in/ folder. Done, you've created a new layout for the VirtualKeyboard. If you aim to add some IME, please refer to the section below. If not, refer to the "Setup layouts" section above.

Adding IME

If you'd like developing the advanced keyboard layout, you have to write some input processing code and place it on the correct place(s) under the /setup folder.

Setup folder structure

/in

Place for the .klc source files

/in/addons

Contains files, named exactly as the target country in the locale code (e.g., for ko-KR, it is KR). It keeps language-wide data, i.e., hieroglyph alphabets.

/in/addons/callbacks

Contains files, named as the layout file name (e.g., chinese-cangjie.js) and contains layout-dependent JS code in the following format:

{'activate' : function () {
   // optional method
   // called on the layout activation time
   // here you could set some initial state for the IME and layout
 }
,'charProcessor' : function (chr, buf) {
   // required method
   // called on the each keypress
   // used for input transformation, based on the current char and existing buffer
   // should return ['new string', selection length]
   return [buf+chr, 0]
 }
}      

/out

Contains the compiled layouts.js file, ready to be used with the VirtualKeyboard.

License

Note: This software is protected by patent No.2009611147 issued on 20.02.2009 by Russian Federal Service for Intellectual Property Patents and Trademarks.

Free license

Keyboard is distributed under LGPL/BSD license with these additional restrictions:

1. Published keyboard should contain the visible copyright information and active link to the Official page.
2. Custom keyboard design should keep copyright visible and accessible.

Commercial license

If you'd like to remove copyrights information from the keyboard UI, it's a good idea to get the commercial license. Please contact me and we'll discuss this.

Services offered

If you have anything you want to see in the keyboard, we offer software/framework integrating services, development of custom layouts and keyboard modules, and so on. Feel free to contact me and I'll take a look at solving your tasks in the best way.

Credits

• Keyboard scripts and layouts sources: Ilya Lebedev
• Korean, Chinese, Japanese, and Lakhota IME's: Konstantin Wiolowan
• Keyboard icon: Viktor Sumkin
• Other layout copyrights

Sites, using VirtualKeyboard

• Official site and support forum
• Demo pages: inline, popup
, iframe, TinyMCE 2, TinyMCE 3, and Xinha
• phpBB mod demo
• RBC National Electronic Library
• English/Persian online dictionary
• LineageII forum
• Tajik form
• Login protection at SB-MONEY.RU service

Competitors

CodeProject already has a similar tool - http://www.codeproject.com/jscript/jvk.asp, but it lacks in the following aspects:

1. Keyboard look could not be customized easily
2. Keyboard layouts are hard to create
3. Complicated installation

SmartLink has the VirtualKeyboard too, but it is not so good either:

1. It is commercial
2. It has keyboard layouts in images
3. It does process deadkeys in a weird way
4. It does not support normal text edit workflow (at least, in FF, it allows to append input chars only)

Gate2Home is nicer of ones, but it has limitations too:

1. Not portable, you can not set it up on a local site
2. Page is full of ads
3. Keyboard reload take ages to complete (the whole page is reloaded)

History

• March 21 2009
• VirtualKeyboard v3.6.1
• Rewritten layout parser and builder, added support for SGCaps and complete support for AltGr shift states
• Added runic and some other ancient layouts
• Added Maynmar, Sanskrit, and series of Ethiopic layouts
• Added support for 4-byte chars in layout
• Added 'tips' highlighting the symbols, which will be activated on the control key press
• Now layouts are better compatible to the real keyboard layouts, as they appear in the MSKLC sandbox
• Updated copyrights with patent-related info
• February 14 2009
• VirtualKeyboard v3.6.0
• Added thumbnails for the skins
• Added support for cookies, now layout and mapping are stateful
• Added Khmer and series of Bengali layouts
• December 5 2008
• VirtualKeyboard v3.4.5
• VirtualKeyboard v3.5.3
• Added Blackfoot, Cherokee and Inuktitut layouts
• Added layouts filtering by the layout group name
• Fixed skins in IE
• Fixed layouts sorting after conversion
• Added a 'lazy' layout initialization
• October 4 2008
• VirtualKeyboard v3.4.4
• VirtualKeyboard v3.5.2
• Added image-free skin
• Code refactoring
• September 9 2008
• VirtualKeyboard v3.4.3
• VirtualKeyboard v3.5.1
• Fixed browser window detection
• Fixed selection pixel coordinates calculation
• Added Chinese Traditional Pinyin layout
• Fixed "smart backspace" feature in the Korean layouts
• Updated Chinese Cangjie and Japanese layouts
• Fixed issue with blocking of the system hot keys (i.e., Ctrl+c)
• Fixed text input from the popup keyboard
• Fixed bug with event handlers cleanup
• Refactored virtual buttons control code
• Fixed "sticky" keys on the keyboard
• September 2 2008
• VirtualKeyboard v3.4.2
• Maintenance release, including fixes from 3.5.0b1 and 3.5.0b2 releases
• Added better IME toolbar
• July 22 2008
• VirtualKeyboard v3.5.0b2
• Added better IME toolbar
• Updated mappings selector, added mapping groups
• Fixed bugs in Chinese Simplified Pinyin
• June 18 2008
• VirtualKeyboard v3.5.0b1
• Added 15 more layouts: Chechen cyr/lat, Dari, Dinka, Kurdish arabic/cyr/lat, Pashto, Tagalog, Tajik lat, Turkmen cyr, Uighur arbic/cyr/lat, Urdu arabic
• Added keyboard input translation mappings

QWERTY

Standard, Canadian, Dutch, Estonian, Greek (220), Greek (319), Gujarati, Italian, Kannada, Portuguese, Scandinavian, Spanish, Tamil, Turkish, UK

QWERTZ

Albanian, Bosnian, Czech, German, Hungarian, Slovak, Swiss

AZERTY

Belgian, French

,WERTY

Bulgarian

QGJRMV

Latvian

UK-Dvorak

FG;IOD

Turkish F

;QBYUR

US-Dvorak

56Q.OR

US-Dvorak

• Fixed tab key in IE
• Fixed input of the dead keys from driver, typing 2 symbols in the input field
• May 17 2008
• VirtualKeyboard v3.4.1
• Added soberTouch skin
• Fixed input of the dot symbol
• April 24 2008
• VirtualKeyboard v3.4.0
• Added iFrame keyboard module, isolating it from the main page and solving conflicts with Prototype and other frameworks
• Rewritten plugins for WISYIWYG editors, allowing any keyboard module integration
• March 28 2008
• VirtualKeyboard v3.3.4
• Fixed selection processing from another window/frame
• Fixed event handlers cleanup for the removed elements
• Updated url parameter names, now they are "vk_skin" and "vk_layout"
• February 23 2008
• VirtualKeyboard v3.3.3
• Updated list of hieroglyphs for Japanese IME
• Improved Lakhota IME
• January 11 2008
• VirtualKeyboard v3.3.2
• Fixed setup scripts, incorrectly processing SGCaps tokens from MSKLC
• Added BOM token to the layouts.js, giving better UTF-8 recognition in browsers
• January 8 2008
• VirtualKeyboard v3.3.1
• Made release preparations
• Fixed bug in DocumentSelection, causing library errors on the empty iframe input
• December 25 2007
• VirtualKeyboard v3.3.0b3
• Significantly improved load speed by delayed layouts initialization
• Simplified layout selection by using single dropdown box with layouts grouped by the language code
• Fixed issues in Safari
• December 19 2007
• VirtualKeyboard v3.3.0b2
• Fixed issues in TinyMCE plugin
• Added plugin for Xinha
• Fixed processing 'Del' key in Internet Explorer
• October 28 2007
• VirtualKeyboard v3.3.0b1
• Added RichEdit controls support
• Created TinyMCE plugin
• August 8 2007
• VirtualKeyboard v3.2.1
• .addLayout params list has been changed, now it required the object of the special structure
• Fixed selection offset calculation
• Introduced layout-dependent CSS classes, allowing keyboard styling, dependent on the layout code
• Fixed FF bug with broken hieroglyphic layouts
• July 2 2007
• VirtualKeyboard v3.2.0b3
• Added Chinese Simplified Pinyin US, Chinese Simplified Cangjie, Lakhota Standard layouts
• Added configurable layout grouping in setup scripts
• Introduced new callback format with 'load' and 'activate' methods
• June 14 2007
• VirtualKeyboard v3.2.0b1
• Added IME support
• Added Chinese Simplified IME layout
• Added support for page's vk_layout and vk_loader.js's layout params, setting initial layout
• May 30 2007
• VirtualKeyboard v3.1.0
• Fixed Opera bug with script includes, preventing keyboard from working there
• Introduced 'binary' layout format, saving about 40% of layout size
• Added PHP script for layouts setup
• Added support for empty buttons in the layout
• Added Mongolian Cyr layout
• April 4 2007
• VirtualKeyboard v3.0.6
• Emergency update, fixed deadkeys processing
• April 3 2007
• VirtualKeyboard v3.0.5
• All CSS manipulations are moved to DOM.CSS class
• Events processing is done with the EventManager class
• Added several fixes in the keypress translation
• Added VK_no_anim CSS class check on the target input fields to disable keys animation there
• March 7 2007
• VirtualKeyboard v3.0.3
• Added Ctrl button and fixed AltGr via Alt+Ctrl emulation
• Fixed CSS, added support for FF1.0.5 and IE5.5
• March 5 2007
• VirtualKeyboard v3.0.2
• Added 61 language and 119 layouts
• Fixed keyboard input translation
• Added ligatures support
• Fixed display of the "zero-width accent" chars
• February 23 2007
• VirtualKeyboard v3.0.1
• Added support for MSKLC
• Added support skins
• 48 languages and 98 layouts supported
• January 13 2007
• First release at CodeProject
• VirtualKeyboard core v3.0b2