Sunday, November 28, 2010

jQuery UI Keyboard Widget

If you need support, please contact me here:

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.