 |
||||||||||
| ||||||||||
| ||||||||||
Web Development »
Client side scripting »
General
Intermediate License: The GNU Lesser General Public License
Javascript VirtualKeyboardBy WingedFoxThe 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,794 Bookmarked: 48 times |
||
|
|
|||
|
Advanced Search Sitemap |
|
|
|
||||||||||||||||
- 3.4.3
- 3.5.1
- 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.
Differences Between the Packages
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
- Add the following line to the head:
<SCRIPT src="vk_loader.js" type="text/javascript"></SCRIPT>
vk_loader.js has 2 optional params:
vk_skinpoints to the folder in the /css/ directory, which contains skin definitionsvk_layoutpasses 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>
- 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'.
- Next typed symbol will reduce a list of available hieroglypgs. 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 default (1st) hieroglyph and begin matching hieroglyps 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'.
Setup Layouts
Most times you have no need in all 130 layouts. Layout configuration is easy as follows...
Local Setup
- Launch /setup/in/setup.html script in IE6 or IE7
- Select the desired layouts and press the 'Process selected' button
- Copy layouts from /setup/out/layouts.js to /layouts/layouts.js
Server Setup (PHP Required)
- Delete /layouts/layotus.js file
- Launch /setup/in/setup.php script
- Select the desired layouts, select 'install' checkbox
- Press the 'Process selected' button
- 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:
- Published keyboard should contain the visible copyright information and active link to the Official page.
- 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:
- Integration and deployment requirements
- Support requirements
- Required layouts
- Field of application
- 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
- Keyboard scripts and layouts sources: Ilya Lebedev
- Korean, Chinese, Japanese and Lakhota IME's: Konstantin Wiolowan
- Keyboard icon: Viktor Sumkin
Sites, Using VirtualKeyboard
- Official demos: 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
The Code Project already has a similar tool - http://www.codeproject.com/jscript/jvk.asp, but it lacks in the following aspects:
- Keyboard look cannot be customized easily
- Keyboard layouts are hard to create
- Complicated installation
SmartLink has the VirtualKeyboard too, but it is not so good either:
- It is commercial
- It has keyboard layouts in images
- It does process deadkeys in the weird way
- 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:
- Not portable, you cannot set it upon the local site
- Page is full of ads
- 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
.addLayoutparams 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.CSSclass - Events processing are done with
EventManagerclass - Added several fixes in the keypress translation
- Added
VK_no_animCSS 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
