5,693,062 members and growing! (20,786 online)
Email Password   helpLost your password?
Web Development » Client side scripting » General     Intermediate License: The GNU Lesser General Public License

Javascript VirtualKeyboard

By WingedFox

The true-multilingual Virtual Keyboard with input translation support
Javascript, CSS, Windows, Visual Studio, CEO, Architect, Dev

Posted: 12 Jan 2007
Updated: 14 Sep 2008
Views: 97,704
Bookmarked: 48 times
Announcements
Loading...



Search    
Advanced Search
Sitemap
23 votes for this Article.
Popularity: 6.43 Rating: 4.72 out of 5
1 vote, 4.3%
1
0 votes, 0.0%
2
0 votes, 0.0%
3
1 vote, 4.3%
4
21 votes, 91.3%
5

Differences Between the Packages

3.5.x release
Implements experimental feature - keyboard translation mappings, configuring proper keys detection for QWERTY/QWERTZ/AZERTY and other keyboard drivers
Full
Contains the development release, as is. It includes layout sources and setup utility.
Compact
Has the same features as 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
Plugin for the corresponding WISIWYG editors, built from Compact package.
VirtualKeyboard screenshot

Introduction

Virtual Keyboard is the great thing 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, Japanese or any other friends. Yes, you can just transliterate your writing, but this will take much more time than you ever expect and makes reading boring.

This is the case to have the VirtualKeyboard installed on a site: you just open it and begin typing. Virtual keyboard will do the translation/transliteration job for you on the fly.

The same goes to the search engines, forums, webmail systems and much other online and offline applications. It makes sense to integrate a tiny app there and make life easier for you and your customers.

Virtual Keyboard Features

  • Full keyboard and mouse input - you can even use them together, pressing keys and press Alt on the keyboard and click mouse on the virtual buttons
  • Support for Microsoft Keyboard Layout Creator for easy creation of the new layouts
  • Support for CSS skins to customize keyboard look
  • Support for ltr and rtl scripts, automatically switching to the appropriate one
  • Support for RichText editors
  • Support for Chinese, Japanese, Korean, Lakhota IME's
  • List of the supported layouts contains more than 130 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 2 optional params:

    • vk_skin points to the folder in the /css/ directory, which contains skin definitions
    • vk_layout passes layout name to enable on start, default is the first loaded one

    Example:

    <SCRIPT src="vk_loader.js?vk_layout=AM%20Armenian%20Eastern&vk_skin=small"
    	type="text/javascript"></SCRIPT>
  2. Add the following lines on 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 Chinese Pinyin layout. Assume, you've opened the page with keyboard and selected a pinyin layout from the keyboard dropdown list.

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

    step 1, pressing 'n'

  • Next typed symbol will reduce a list of available hieroglypgs. 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 default (1st) hieroglyph and begin matching hieroglyps 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

Setup Layouts

Most times you have no need in all 130 layouts. Layout configuration is easy as follows...

Local Setup

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

Server Setup (PHP Required)

  1. Delete /layouts/layotus.js file
  2. Launch /setup/in/setup.php script
  3. Select the desired layouts, select 'install' checkbox
  4. Press the 'Process selected' button
  5. If you haven't selected 'install' checkbox, layouts from /setup/out/layouts.js to /layouts/layouts.js

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

Developing New Layouts

Beginning

Any new layout should be described in the *.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 the *.klc file to 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 to develop the advanced keyboard layout, you have to write some input processing code and place it in 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. (i.e. for ko-KR it is KR)
It keeps language-wide data, i.e. hieroglyph alphabet.
/in/addons/callbacks
Contains files, named as the layout file name (i.e. chinese-cangjie.js) and contains layout-dependent JS code in the following format:
{'load' : function () {
   // optional method
   // called on the load time
   // very useful for initial IME data preprocessing
 }
,'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 compiled layouts.js file, ready to be used with VirtualKeyboard.

License

Free License

Keyboard is distributed under LGPL/BSD license with the 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. The cost of this license depends on:

  1. Integration and deployment requirements
  2. Support requirements
  3. Required layouts
  4. Field of application
  5. Custom development requirements

This license includes on-depends support, delivery of the hotfixes and lets you have an influence on the keyboard development by submitting the first-priority feature requests.

Services Offered

If you have anything you want to see in the keyboard, we offer software/framework integrating services, development of the 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

Sites, Using VirtualKeyboard

Competitors

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

  1. Keyboard look cannot 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 the 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 the ones available, but it has limitations too:

  1. Not portable, you cannot set it upon the local site
  2. Page is full of ads
  3. Keyboard reload takes ages to complete (the whole page is reloaded)

History

  • September 9th 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 2nd 2008
    • VirtualKeyboard v3.4.2
    • Maintenance release, including fixes from 3.5.0b1 and 3.5.0b2 releases
    • Added better IME toolbar
  • July 22nd 2008
    • VirtualKeyboard v3.5.0b2
    • Added better IME toolbar
    • Updated mappings selector, added mapping groups
    • Fixed bugs in Chinese Simplified Pinyin
  • June 18th 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 Internet Explorer
    • Fixed input of the dead keys from driver, typing 2 symbols in the input field
  • May 17th 2008
    • VirtualKeyboard v3.4.1
    • Added soberTouch skin
    • Fixed input of the dot symbol
  • April 24th 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 28th 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 23rd 2008
    • VirtualKeyboard v3.3.3
    • Updated list of hieroglyps for Japanese IME
    • Improved Lakhota IME
  • Januari 11th 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 8th 2008
    • VirtualKeyboard v3.3.1
    • Made release preparations
    • Fixed bug in DocumentSelection, causing library errors on the empty iframe input
  • December 25th 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 19th 2007
    • VirtualKeyboard v3.3.0b2
    • Fixed issues in TinyMCE plugin
    • Added plugin for Xinha
    • Fixed processing 'Del' key in Internet Explorer
  • October 28th 2007
    • VirtualKeyboard v3.3.0b1
    • Added RichEdit controls support
    • Created TinyMCE plugin
  • August 8th 2007
    • VirtualKeyboard v3.2.1
    • .addLayout params list has been changed, now it requires the object of the special structure
    • Fixed selection offset calculation
    • Introduced layout-dependant CSS classes, allowing keyboard styling, dependent on the layout code
    • Fixed FF bug with broken hieroglyphic layouts
  • July 2nd 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 14th 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 30th 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 4th 2007
    • VirtualKeyboard v3.0.6
    • Emergency update, fixed deadkeys processing
  • April 3rd 2007
    • VirtualKeyboard v3.0.5
    • All CSS manipulations are moved to DOM.CSS class
    • Events processing are done with 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 7th 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 5th 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 23rd 2007
    • VirtualKeyboard v3.0.1
    • Added support for MSKLC
    • Added support skins
    • 48 languages and 98 layouts supported
  • January 13th 2007
    • First release at CodeProject
    • VirtualKeyboard core v3.0b2

License

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

About the Author

WingedFox



Occupation: Web Developer
Location: Russian Federation Russian Federation

Other popular Client side scripting articles:

Article Top
Sign Up to vote for this article
You must Sign In to use this message board.
FAQ FAQ Noise ToleranceSearch Search Messages 
 Layout  Per page   
 Msgs 1 to 25 of 161 (Total in Forum: 161) (Refresh)FirstPrevNext
QuestionPassword field not working in the demo (compact 3.5.1) [modified]memberJcmorin11:32 28 Nov '08  
NewsChecklist for IME requestsmemberWingedFox7:22 7 Nov '08  
QuestionHow did you crack the mystery of Microsoft's KLC?memberjwhurst7:17 26 Sep '08  
AnswerRe: How did you crack the mystery of Microsoft's KLC?memberWingedFox20:23 28 Sep '08  
QuestionExcellent work - any advice for a desktop WPF version?memberjwhurst12:01 25 Sep '08  
AnswerRe: Excellent work - any advice for a desktop WPF version?memberWingedFox19:39 28 Sep '08  
GeneralSetup for TinyMCE3memberchaldar22:27 12 Aug '08  
GeneralRe: Setup for TinyMCE3memberWingedFox23:05 12 Aug '08  
GeneralRe: Setup for TinyMCE3memberchaldar1:58 13 Aug '08  
GeneralRe: Setup for TinyMCE3memberWingedFox2:56 13 Aug '08  
GeneralRe: Setup for TinyMCE3membersunilkjain11:22 30 Oct '08  
AnswerRe: Setup for TinyMCE3memberWingedFox21:22 30 Oct '08  
GeneralRe: Setup for TinyMCE3membersunilkjain2:01 31 Oct '08  
GeneralRe: Setup for TinyMCE3memberWingedFox4:12 1 Nov '08  
QuestionRe: Setup for TinyMCE3memberchaldar6:27 1 Sep '08  
AnswerRe: Setup for TinyMCE3memberWingedFox6:41 1 Sep '08  
GeneralRe: Setup for TinyMCE3memberchaldar7:52 28 Sep '08  
GeneralRe: Setup for TinyMCE3memberWingedFox19:13 28 Sep '08  
GeneralRe: Setup for TinyMCE3memberchaldar3:29 29 Sep '08  
GeneralRe: Setup for TinyMCE3memberWingedFox19:55 29 Sep '08  
GeneralRe: Setup for TinyMCE3memberWingedFox10:14 4 Oct '08  
GeneralRe: Setup for TinyMCE3memberchaldar3:08 9 Oct '08  
GeneralRe: Setup for TinyMCE3memberchaldar8:29 9 Oct '08  
AnswerRe: Setup for TinyMCE3memberWingedFox8:56 9 Oct '08  
GeneralRe: Setup for TinyMCE3memberWingedFox9:02 9 Oct '08