Click here to Skip to main content
15,916,692 members
Articles / Web Development / CSS

JavaScript VirtualKeyboard

Rate me:
Please Sign up or sign in to vote.
4.95/5 (30 votes)
25 Mar 2009LGPL310 min read 28.2M   8.5K   110   212
A true-multilingual Virtual Keyboard with input translation support.
Differences between the packages:
Contains the development release, as is. It includes layouts sources and setup utility.
Has the same features as the full release, but all scripts are packed and obfuscated with Tricky Scripter.
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.

VirtualKeyboard screenshot


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:
  2. HTML
    <SCRIPT src="vk_loader.js" type="text/javascript"></SCRIPT>
    vk_loader.js has two optional params:
    points to the folder in the /css/ directory, which contains skin definitions
    pass layout name to enable on the start, default is the first loaded one


    <SCRIPT src="vk_loader.js?vk_layout=AM%20Armenian%20Eastern&vk_skin=soberTouch" 
  3. Add the following lines at the page with the text fields:
  4. JavaScript

    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'.
  • step 1, pressing 'n'

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

  • 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).
  • step 3, pressing 'h'

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

    step 5, pressing 'o'

  • Press '1' or 'Enter' to complete the input. 你好 is 'hello'.
  • step 6, ni hao

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


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

Place for the .klc source files
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.
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]
Contains the compiled layouts.js file, ready to be used with the VirtualKeyboard.


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.


Sites, using VirtualKeyboard


CodeProject already has a similar tool -, 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)


  • 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
      Albanian, Bosnian, Czech, German, Hungarian, Slovak, Swiss
      Belgian, French
      Turkish F
    • Fixed tab key in IE
    • Fixed input of the dead keys from driver, typing 2 symbols in the input field
  • May 17 2008
  • 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


This article, along with any associated source code and files, is licensed under The GNU Lesser General Public License (LGPLv3)

Written By
Web Developer
Russian Federation Russian Federation
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

QuestionVirtualKeyboard Pin
Member 108590582-Jun-14 2:39
Member 108590582-Jun-14 2:39 
QuestionMultiple virtual keyboard use in one page. Pin
Member 1051332912-Jan-14 20:27
Member 1051332912-Jan-14 20:27 
QuestionHow to set the value of textbox in virtual keyboard Pin
aeman15-Nov-12 20:09
aeman15-Nov-12 20:09 
AnswerRe: How to set the value of textbox in virtual keyboard Pin
WingedFox7-Feb-13 6:30
WingedFox7-Feb-13 6:30 
QuestionCan we make this keyboard dragable Pin
Member 440032117-Jan-12 22:24
Member 440032117-Jan-12 22:24 
QuestionJS V_KB with Flash? Pin
NautTboy3-Feb-11 11:37
NautTboy3-Feb-11 11:37 
AnswerRe: JS V_KB with Flash? Pin
WingedFox26-Feb-11 11:02
WingedFox26-Feb-11 11:02 
GeneralSetup Layouts Not working Pin
vijayrawatsan22-Mar-10 5:31
vijayrawatsan22-Mar-10 5:31 
GeneralVirtual keyboar disable the readonly attribute on a TextBox Pin
Cesar De Min22-Jan-10 9:37
Cesar De Min22-Jan-10 9:37 
GeneralRe: Virtual keyboar disable the readonly attribute on a TextBox Pin
WingedFox24-Jan-10 21:01
WingedFox24-Jan-10 21:01 
GeneralMarket for US based Virtual Keyboard Pin
David M. Davis8-Jan-10 2:47
David M. Davis8-Jan-10 2:47 
GeneralRe: Market for US based Virtual Keyboard Pin
WingedFox29-Jan-10 2:25
WingedFox29-Jan-10 2:25 
GeneralChanging layout Pin
NautTboy19-Jun-09 11:49
NautTboy19-Jun-09 11:49 
GeneralRe: Changing layout Pin
WingedFox29-Jun-09 5:04
WingedFox29-Jun-09 5:04 
QuestionCan it be added to MS Windows keyboard layout Pin
NautTboy14-May-09 15:37
NautTboy14-May-09 15:37 
AnswerRe: Can it be added to MS Windows keyboard layout Pin
WingedFox14-May-09 18:55
WingedFox14-May-09 18:55 
GeneralRe: Can it be added to MS Windows keyboard layout Pin
NautTboy15-May-09 15:18
NautTboy15-May-09 15:18 
Generalembeded to phpfreechat Pin
NautTboy7-Apr-09 12:03
NautTboy7-Apr-09 12:03 
GeneralRe: embeded to phpfreechat Pin
WingedFox8-Apr-09 0:38
WingedFox8-Apr-09 0:38 
GeneralRe: embeded to phpfreechat Pin
NautTboy11-Apr-09 7:01
NautTboy11-Apr-09 7:01 
GeneralRe: embeded to phpfreechat Pin
WingedFox12-Apr-09 19:14
WingedFox12-Apr-09 19:14 
GeneralRe: embeded to phpfreechat Pin
NautTboy13-Apr-09 8:22
NautTboy13-Apr-09 8:22 
GeneralRe: embeded to phpfreechat Pin
WingedFox13-Apr-09 22:25
WingedFox13-Apr-09 22:25 
GeneralRe: embeded to phpfreechat Pin
NautTboy14-Apr-09 9:37
NautTboy14-Apr-09 9:37 
GeneralRe: embeded to phpfreechat Pin
WingedFox15-Apr-09 23:06
WingedFox15-Apr-09 23:06 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.