Virtual Keyboard

Prologue

The very first release was the simple script for Cyrillic input. Since that time, keyboard evolution went trough the CSS skinning, implementation of the different layouts, inventing of the “yet another” IME ¹⁾ implementation, support for the RichEdit controls and so on.

What about the keyboard itself

The existing keyboard implementation does support the input from GUI using the mouse clicks and the translation of the real keystrokes to the “virtual” ones as well. Any symbols on the keyboard are color-coded: black symbol indicates the current input, AltGr or Ctrl+Alt has to be pressed to activate symbols marked in blue, Shift activates the green symbols. Red marks are used for the ”dead keys” adding accents to the certain letters on the keyboard. Deadkey itself could be input by the duplicate key press.

Features

At first you can try the Live Demo and read about the IME.

support more than 80 languages and 160 keyboard layouts
mouse and styles input
keyboard input with on-the-fly translation from the real keystrokes to the virtual ones, including different translation tables for the different keyboard drivers
compatibility: Internet Explorer 5.5+, FireFox 1.0.15+, Safari 3.0.3+, Opera 9.0+ ²⁾
support for setting URL parameters for
- default layout: Hindi Traditional
- default skin: soberTouch
page embedding
- inline HTML ³⁾
- popup window
- using iFrame ⁴⁾
has plugins for the following WYSIWYG editors: TinyMCE 2, TinyMCE 3, Xinha
support for cookies for session-related data, like the current layout and keyboard mapping
flexible and easy CSS-based skinning
support for Microsoft Keyboard Layout Creator and custom IME scripting.
flexible layouts configuration and filtering
support for the "dead keys", i.e. layouts like the Slovak, including lots of the accented chars
support for IME for the Chinese Cangjie, Japanese and other layouts

Keyboard CSS Themes

Virtual Keyboard has the great CSS-compliance, which makes theme creation and adjustment easy as never before.

The following themes are already implemented:

If theme does not fit your website well, just update it, or create new one.

Website setup

Inline html keyboard

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

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

For the popup window and iframe instances setup is mostly the same. Please see the corresponding demo pages for the detailed code examples.

TynyMCE 2&3

tinyMCE.init({
     mode : "textareas"
    ,theme : "advanced"
    ,plugins : "Jsvk"
    ,theme_advanced_buttons1_add_before : "Jsvk, separator"
});

Xinha

var xinha_plugins = [ 'Jsvk' ];
function xinha_init() {
  if(!Xinha.loadPlugins(xinha_plugins, xinha_init)) return;
  var xinha_config = new Xinha.Config();
  xinha_config.Jsvk.type = 'Popup';
  xinha_config.Jsvk.layout = 'RU Russian';

KirzeN online dictionary

Releases

v3.6.4,

Release Notes

This release of the VirtualKeyboard does include the following improvements and bugfixes:
 - Fixed issue with incorrect cursor offset calculation and incorrect placement of the IME toolbar
 - Fixed issue with IME toolbar hidden beneath the VK
 - Fixed issue with "jumping" select boxes in Opera
 - Fixed issue with IME suggestions acting as ordinary links
 - Usability improvement for IME, suggestions are getting highlighted, instead of underlining
 - Usability issue, don't touch the default behavior of the physical Tab key
 - Code refactoring for loader, made it more lightweight
 - Implemented on-the-fly skin management
 - Implemented automatic detection of the target input window and event management
 - Added 'lite' module, which requires zero configuration for end-user
 - Updated demo files

v3.5.3, release notes

v3.4.5, release notes