Online Virtual Keyboard With Canvas and Javascript

I’m releasing a HTML Canvas and Javascript based virtual, online, onscreen keyboard for testing and whatever fun you can make out of it. This release is actually dedicated for my friend’s 25th birthday, but its kind of way overdued. (CH, if you are reading this, happy belated!)

Virtual Keyboard

Basically what’s a virtual keyboard is that its simply an input without a physcial keyboard.
If you add this as a Keyboard Bookmarklet (Firefox recommended – drag this to your toolbar), you may use this keyboard on various websites buy clicking on your bookmark which launch as translucent, mac like, on screen keyboard.

If you are thinking of projection keyboards, sorry, it isn’t as cool as that, yet.

However, you can use this keyboard to enter text into textareas and input field by using your mouse, stylus or touchscreen. If you decide to use your physical keyboard, the virtual keyboard gets “lighted up”.

Some have asked me the purpose of this project anyway. Some sites like this would say there’s enhanced security particular from keyloggers. Of course, this isn’t really true since virtual keyboards may be backdoors themselves so please do not use this or any other bookmarklet, greasemonkey, addons etc you do not trust for sensitive information.

Yes, one reason is that I’m having playing around with html canvas again. Another is that I have always been interested to with multiple inputs/users. Creating custom interfaces with canvas could create the possibility of interfacing 2 users in a browser – imagine 2 users surfing the net together by sharing a wide browser screen on a pc. Fifa 95 (thats over a decade ago!) allowed 2 users to play with or against each other – one with the keyboard, another with the mouse, and this would be possible with a virtual keyboard (for the 2nd user). Whether this is another lame project, or whether there are possible great ideas, I’ll leave it up to your imagination.

Before ending with the tons of technical details, try out the demo and let me know of your comments, if any :)

Virtual Keyboard works with Google.com

More details of this release
+ Uses jQuery 1.4.1 (Loads dynamically in bookmarklet)
+ Virtual Keyboard – Drawned with Javascript and HTML Canvas Element
+ The Mac lookalike Design of the keyboard inspired from this NetTuts tutorial which used html, jquery and css instead.
+ Autofire keys & work around for text selection when autofiring in Chrome.
+ Onscreen Keypresses Feedback as you typed – Keybindings aided with plugin jHotKeys
+ Onscreen Key Highlighting Disabled for Password fields
+ Keyboard is draggable around the screen
+ Works with Textarea and Input fields.
+ Demonstrates a simple drawing framework with JSON
+ Uses TextCanvas for canvas rendering of text
+ Bookmarklet – see this interesting jQuery Bookmarklet boot code

See here for source code, and here for YUI compressed version.

Future improvements I would love to see.
+ 100% Bugs Free
+ IE compatibility
+ Docking
+ API
+ Stay tuned ;)

11 thoughts on “Online Virtual Keyboard With Canvas and Javascript

  1. Excellent! Will it work on mobile phones? I think it could become a handy tool with international keyboards. For now I use http://litetype.com but if only I could use it on any page like yours… Any hope?

  2. ycc: the javascript should work with any html5 compatible browser. the only problem is whether these browsers support bookmarklets.

    sa1: thanks for the heads up. I’ll look into it.

  3. Cool! Thanks!
    I’ll keeping an eye your your work. Keep it up! =)

    PS: Chinese, Japanese and Korean: we have no luck for Google transliteration… yet (I hope)

  4. using google chrome. experiencing the Caps lock key has bug, once i clicked the Caps lock, then all characters are upper case, and can not go back to lower case.

  5. Sorry, I´ve solved the problem, you can delete the comments. Thank´s for the great code. ;)

  6. Nice … very nice… but one small issue.. how can you get the tab key to actually tab between input boxes.

  7. Thx so much for your code.
    I think that it would be better if a CSS file is put outside the js, since I’d like to change the key colours,backgrounds, dimension, and position and avoid to move it. (I’d like to use it on a fix bottom layer). Hope you¡ll find time for this ;)
    Cheers!!!

Comments are closed.