Jan 15, 2010

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')
            [["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.


Anonymous said...

It's very great, and I tested it on Firefox and Google Chrome. But it cannot display correctly in IE(v7) of Windows XP SP3.

Anonymous said...

To make the plugin work with latest jquery ui 1.8 below is the change required

comment all positioning code in the function {element.focus(.. } and add the below

of: $(element.get(0)),
my: "left top",
at: "left top" }).show();

btw, its a very good plugin (Thank You)


Anonymous said...

Thanks for the last comment about version 1.8.

farmerbob said...

This is great but barfs in Chromium. The following fixes it at line 355:

var el = keyBtn.clone() .attr('name','key_'+row+'_'+key) .attr('value',keys[key]);
if(el) el.appendTo(newSet); else $(el).val(keys[key]);

Thanks for this!

Laurie said...

Beautiful little plugin, super useful. Is it possible to apply custom font styles to the buttons?

I tried adding some simple font-size stuff to the CSS entries for .ui-keyboard-button and the like but I think I'm digging in the wrong place.

Jeremy Satterfield said...

Thanks for all the feedback guys. I've been pretty busy for a while so i haven't gotten a chance to work on any of your suggestions, but, as was my intention from day one, anyone can modify as they need. Once I do get a chance I will integrate some of these changes.

As for the styling, I built the plugin around the standard jquery-ui framework to automatically work with any jquery-ui theme.

Applying font styles to the ui-keyboard class would be the proper way of modifying the look. Applying a font-size to this class will adjust the entire keyboard's size proportionally.

Hope this helps.

Jeremy Satterfield said...

Hey guys. I released version 1.4 over at Snipplr and Jquery plugin. I've updated to use the jquery ui 1.8 positioning (thanks to Alok for the reminder) and cleaned up a few bits of code that shouldn't change functionality. In my testing in Firefox 3.6 and the current version of Chrome, it's working quite well. Let me know if you run into an issues.

Mottie said...

Hi Jeremy!

This plugin looks very promising :)... I hope you don't mind but I made a copy of it (slightly modified for now) in my github repository here. I've been working on adding an international layout (using an AltGr key to show it) and a few other changes - I haven't posted them yet, but they should be added soon :)

Rob (aka Mottie)

Jeremy Satterfield said...

Hey Rob, that's looking great. As with all of the things I post here, as long as you follow the Creative Commons license I use for that project, I'm more than happy to provide a starting point for any other developers to work from.

The reason I haven't setup a github project is because I use Mercurial for my version control and just recently started using bitbucket. However, if you are willing to share development on this project going forward I would be happy to use github for this project. My username is jsatt. If you want to contact me about this further, just contact me at the email address on my github profile.

Nuno said...

Excelent work.

What should we do if we want to use it and also a normal keyboard?

If i focus on an input to show this virtual keyboard, the normal one do not work.

Can you make some way so we can use both?

Jeremy Satterfield said...

I haven't had time to post an update on this in a while, but I strongly suggest you use Mottie's version instead. He started out modifying the code you see here and in a short time has grown it way beyond anything I had in mind when I started the project. I hope that someday I can contribute to this project again, but in the meantime Mottie is doing a great job and you should get it here:https://github.com/Mottie/Keyboard

Dan Renne said...

Jeremy, How can I disable the Keyboard from showing up. I want to toggle this feature.

Dan Renne said...

I figured it out.

.removeClass('ui-keyboard-input ui-widget-content ui-corner-all')
.unbind('focus accepted canceled hidden visible');

Maybe expose a function called RemoveKeyboard();?

Anonymous said...

Thanks for your keyboard.
I've got to use {dec} button, but it doesn't work with usePreview: false. Maybe you'll fix it in next release

Erick Miguel said...

Hola estuve usando tu teclado, pero al cambiar a firefox 4 asi como chrome, el teclado aparece bien en la primera cargada, pero cuando le hago click a denuevo al input se comienza a descuadrar y el teclado se desplaza a la parte posterior de la pantalla y es mas se sale del recuadro de la pantalla. ayudame porfavor, lo necesito urgente.

Jeremy Satterfield said...

Erick, as stated above, Please use mottie's keyboard instead. I have stopped supporting this code.

Sidra Sultana said...

Anyone have an idea how to customize on screen keyboard jquery plugin, in terms of setting the keyboard right in the center of the page and setting the field label or title as the jquery field title. Thanks in advance

Cristian Molina said...

Trying to implement it in a TV app. Looks great so far. Very complete implementation.

Asif Rabbi said...

--->>On Screen Keyboard Portable! Free Download[328 kb]