Sunday, November 28, 2010

jQuery UI Keyboard Widget

I found this widget by Jeremy Satterfield which adds an virtual keyboard to any input or text area. I really liked it and had a lot of ideas that I wanted to add :P

So, I made a github repository, added a few of my ideas to the widget so now I present to you updated keyboard widget! (more updates to come!)


Here are some of the changes I made to version 1.5:
  • Changed class of preview window from 'ui-state-active' to 'ui-widget-content' because it looks bad in some themes.
  • Added 'ui-widget-content' class to the element (input or textarea).
  • Added International keyboard Layout (AltGr key) and expanded the keysets up to four.
  • Added more special/"action" keys:
    • Previous text only keys now have a companion symbol only key. The abbreviated names contain only a symbol so as to fit the layout style as desired.
    • Added alt key to allow accessing two additional key sets.
    • Changed name of {neg} to {sign}. This key changes the sign of the input.
    • Added tab key
  • Fixed positioning utility problem I added in the last version - show the popup before positioning (duh).
  • Added position option to allow positioning the keyboard anywhere around the input/textarea.
  • Added display option to support multiple languages or change key symbols.
  • Added actionClass option to allow changing the style of the accept and cancel keys.
  • Added lockInput option to lock or unlock the ability to access the preview window.
  • Added keyBinding option to change the keyboard key behaviour.
  • Added useCombos to enable the dead key emulation which allows entering diacritic key combinations.
  • Using the escape key now closes the keyboard.
  • Added mousewheel support to allow scrolling through the other keysets while hovering over a key.
  • Added ARIA support (may not be complete).
And on my to do list are:
  • Allow inserting text at the caret inside the preview window.
  • Add max length setting.
  • Add additional buttons to change key sets (similar to the alt key).
  • Add callbacks.
  • Add _destroy function.
  • Work on setting up one keyboard per layout to speed up initialization.
Posted by Mot Tie at 10:59 AM
Labels: , , , ,

6 comments:

  1. Hello,

    I'm using the version 1.8.10 with the autocomplete feature, how to make the keyboard to close automatically when something is selected from the autocomplete list?

    With firefox, I have done something like this:

    .autocomplete({
    source: "step4.php?citylist",
    select: function( event, ui ) {
    $('#zip').getkeyboard().close(true);
    }
    })

    Unfortunately, it's not working with IE.

    Regards

    ReplyDelete

  2. Hi Cyrille!

    Hmm, that is odd. Well it seems that something weird is going on with that function and I'm not sure why, but I did find a "quick fix" (basically wrapping the function in a setTimeout):

    select: function( event, ui ) {
    setTimeout(function(){
    $('#keyboard').getkeyboard().close(true);
    }, 0);
    }

    Here is a demo

    ReplyDelete

  3. Very cool keyboard! What's the license on it? MIT, I hope?

    Best Regards,
    Jim

    ReplyDelete

  4. Awesome keyboard. We are going to use the keyboard in qwerty, but we want the keyboard to always open in a div at the top of our page and not just where the field is at. Can we do this easily?

    ReplyDelete
    Replies

    1. Check out this demo. That demo uses css to position the keyboard at the bottom of the page; but you can also use the "position" option to place the keyboard anywhere you want.

      Delete

Subscribe to: Post Comments (Atom)