On-Screen Keyboard Widget using jQuery-UI

One Last Update: It's been a good while since I gave a good update on this project's state, so here's the deal. I started this project to fulfill a need I had at the time and opensourced it so someone might have a something to start with to fulfill a similar need. Turns out Mottie had a similar need and found this a good starting point. He has now built an on-screen keyboard widget much better than anything I had intended to develop. This post is staying here for reference, but I highly recommend going over to Github and get the latest version of Mottie's branch instead.

A while back I came to a project which I was developing for a small touchscreen device with a limited Linux install which may or may not have a physical keyboard attached. While our overall plan for the project was to not have any forms to fill out and thus no requirement for a keyboard, we saw a potential need down the road and rather than wait until we must have it I set out to see what kind of touchscreen keyboard jQuery could make possible.

Now, as a touchscreen with no keyboard is a very limited need in the jQuery world there were very few examples out there and none that took full advantage of many of the things build into jQuery UI. So, I new pretty early that I'd be building something from scratch. I wanted it to not just be a function you call that happened to use jQuery, but rather built as a true widget much like the datepicker built into jQuery UI. I also wanted it to be very customizable: resize with the reset of the page, have multiple keyboard layouts, even allow users to define their own keyboard layout. After a little planning and a couple days of coding here and there I came up with this:

Samples removed due to jQuery plugins site being erased

With a simple jQuery call and a few additional lines of css you can have any keyboard layout you could possibly need.

$('input[type=text], input[type=password], textarea')
    .keyboard({
        layout:"qwerty",
        customLayout:
            [["q w e r t y {bksp}","Q W E R T Y {bksp}"],
            ["s a m p l e {shift}","S A M P L E {shift}"],
            ["{accept} {space} {cancel}","{accept} {space} {cancel}"]]
    });

It has been tested on most browsers supported by jQuery UI and works. At this time the keyboard will center itself top-to-bottom on the left side of the screen, this is a feature I plan to change so that the keyboard appears from the field you are actually editing. I have they entire source available for download at both jQuery Plugins and Snipplr. Feel free to give any feedback you may have.

Creative Commons Attribution-Share Alike 3.0 Unported License

Update: It seems something in Blogger's style are forcing the keyboard to only appear at the top of the page. I'm working on it quickly, until then you are able to scroll to the top when it appears and use it.

Update: Fixed!

Update: After a little more tweeking, the positioning of the keyboard works much better across the board. All sources have been updated.