Update: Connie Wiolowan of allanguages.info has made some comments and I've updated the post to reflect them. Thanks!
Connie also created a jQuery plugin for the virtual keyboard; see the comment for details.
I like Ilya Lebedev's JavaScript VirtualKeyboard a lot. It's clever, got an elegant UI, allows you to remap the physical keyboard to any language you want, and has an active and responsive support forum. But it's got a few quirks that make it hard to use with jQuery.
- Virtually no documentation. You have to read the source to get anywhere. But here's a brief introduction (assuming you use jQuery):
- Download the package from SourceForge, unzip the tarball and put the whole folder (don't mess up the organization!) somewhere accessible.
- Include the script with
<script type="text/javascript" src="/path/to/files/vk_loader.js" ></script>. - Have a blank
<div>in your HTML that will house the keyboard. I'll use<div id="jsvk" />in these instructions. - Have one or more
<input type="text" >s or<textarea>s that will accept the keyboard input. - In your
$(document).loadfunction, include the statementVirtualKeyboard.show($('input')[0], $('#jsvk')[0]). - Other useful functions include
VirtualKeyboard.hide()that hides the keyboard and removes it from the DOM,VirtualKeyboard.attachInput($('input')[0])that leaves the keyboard visible where it was but associates a new input element with it, andVirtualKeyboard.detachInput()that leaves the keyboard visible but removes the association with an input element. VirtualKeyboard.openis a synonym forVirtualKeyboard.showandVirtualKeyboard.closeis a synonym forVirtualKeyboard.hide.
- The
VirtualKeyboardis a Singleton. This means that you can only have one keyboard shown on a page, and the "skin" (the CSS of the keyboard) is fixed at initialization even if you move it around and associate it with different input elements. It also means that if you use the keyboard for different input elements, changing the language for one changes it for all of them. You can get around this by putting the keyboard into its own document and using iframes or popup windows, and the code includes samples for both of those. - The package is huge. The "compacted" version is 4 MB. Most of that is the development files, so it's not like every page downloads megabyte files (the largest downloaded file is the keyboard layout package, about 390K), but it's still huge.
- Part of the reason that it's so big is that it does everything. Lebedev has put an entire Javascript library into this package, including its own event manager that overrides jQuery's. So you can't do
$('input').click(function(evt){})on elements that are attached to the keyboard. You have to use hisEM.addEventListener(self.element[0],'click', function(evt){}). - Options are too clever by half: he parses the
<script src="/path/to/vk_loader.js?query-string>query string to get them. So to set the initial layout and the skin, I used<script type="text/javascript" src="/path/to/vk_loader.js?vk_layout=IL%20Hebrew&vk_skin=flat_gray" ></script>. Options are:- vk_skin: name of folder in the /css folder in the package to use for the CSS
- vk_layout: name of the keyboard layout. The available names are listed on the right hand side of the home page or the project developement page
But these are really minor issues for such a great package, and adapting it to use jQuery isn't that hard (I'm using my textpopup plugin as a base):
<div id="example">
Example: <br/><input style="float:left"/><input style="float:right"/>
<br style="clear:both"/>
</div>
var keyboard = false; // VirtualKeyboard is a singleton, so we have to make sure there's just one container
$.ui.textpopup.subclass("ui.jsvk", {
_createBox: function(){
if (keyboard) return keyboard;
var self=this;
self._super();
keyboard = self.theBox;
VirtualKeyboard.open(self.element[0], self.theBox[0]);
EM.addEventListener(self.element[0],'keypress', function(e){
if (e.getKeyCode()==27) self.hide();
});
return self.theBox;
},
show: function(){
VirtualKeyboard.attachInput(this.element[0]);
this._super();
},
hide: function(){
VirtualKeyboard.detachInput();
this._super();
}
});
$('#example input:eq(0)').jsvk({position: 'bl'});
$('#example input:eq(1)').jsvk({position: 'br'});
Connie Wiolowan says:
Hi there, I’m Ilya Lebedev’s coworker in designing several keyboards (CJK and Amerindian ones) for VK.
I designed a VK module for jQuery that is utilized in the Lakota forum and online dictionary:
http://www.lakotadictionary.org/nldo.php
First, let me note, that all the current versions of VK do not have dynamic keyboard downloading. All the keyboards are loaded once and all – in a 390 kB layouts/layout.js file.
The “huge” size of the installation you mentioned is because of the “developer SDK” included, you can download “lite” version with the scripts bundle not surpassing 500 kB.
The “download on demand” version is our v.4 project. This would enable far more keyboards, including dozen more Chinese, requiring megabytes of JS maps for overall downloads.
As for the jQuery, here’s my try. Sorry for a laconic documentation, it was self-evident for me.
Although VK is indeed a singleton, I made it dynamically attachable and reattachable to the HTML inputs via
$.attachVK(..) function
http://allanguages.info/virtualkeyboard/jquery.vk.js
http://allanguages.info/virtualkeyboard/vkjquery.html
Imagine you have multi-language inputs on your page, like this:
EnglishSome stuff here
RussianSome stuff here
ChineseSome stuff here
Korean
Then you can attach VK to these inputs like this:
$(‘td input’).attachVK({
visible:0,
turnedOn:1
,layouts:[‘US US’, ‘RU Russian’,’CN Chinese Simpl. Pinyin’]
})
$(‘#Kor’).attachVK({
visible:1,
turnedOn:1
,layouts:[‘KR 2 Beolsik’]
})
This ensures that the first three input fields have US, Russian, and Chinese VKs linked (invisible, turned on, on/off switchable via small icons)
I also checked whether VK can be made draggable via jquery UI means – it can be draggable! (but dragging is somewhat slow).
January 14, 2011, 8:57 pmDanny says:
@Connie:
January 15, 2011, 6:33 pmThat is very cool. Thanks for the links and the corrections; I will update the post and take a look at your jQuery plugin. You need to publicize this more!
–Danny
Ilya Lebedev says:
Danny,
Thanks for exploring my project! =)
Btw, documencation you can find at my website and at CodeProject, see the links in demos. Also, please take in a count, that in 2005/2006th there was no jQuery.
–Ilya
January 17, 2011, 4:24 amDanny says:
@Ilya:
January 17, 2011, 12:33 pmThere is some documentation but it’s limited (how do I set the initial layout? how do I change skins?). It’s possible to figure it all out but it takes some exploring.
I’m certainly not complaining that your code doesn’t mesh perfectly with jQuery; there’s no reason it should. If I want them to work together, it’s my job to coordinate (though it looks like Connie’s plugin does the work for me).
–Danny