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.

15 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
  5. Hi,

    Great plugin.

    Let's say I want to recognize which button was pressed - I want to know when backspace was pressed. How to do that?

    I tried to bind handler to click event of the button in "visible" function:

    $('button[data-value="Bksp"]').bind('click', function() {});

    but it dosen't work.

    ReplyDelete
  6. Hi Raph!

    Check out this demo

    $('#keyboard').keyboard({

    // keyboard visible callback
    visible : function(e, keyboard, el) {
    // ignore code if already applied
    if (!keyboard.$keyboard.hasClass('bound')) {
    keyboard.$keyboard
    .addClass('bound') // prevent multiple binds
    .find('.ui-keyboard-bksp') // bksp key class
    .bind('click', function(e){
    // update display with message + time
    $('#display').html('bksp clicked: ' + e.timeStamp);
    });
    }
    }

    });

    ReplyDelete
  7. Hi,

    Thanks! It works :)

    I have one more problem.

    I'm trying to do a kind of autotab feature (with autoaccept on). Something like that: http://www.mathachew.com/sandbox/jquery-autotab/ There are four inputs for PIN number and I want to cursor jump between them when user enters the char. I'm able to do auto switch between inputs using focus() but I doesn't look well, because the keyboard disappears while cursor jumping between the inputs.

    The second thing is that I want to allow user go back to previous input using backspace (that's why I asked you about backspace detection), but when I'm going back using focus(), keyboard "thinks" is still on the next input ("el" argument from "change" callback is still have reference to it) and it doesn't work.

    Any ideas?

    ReplyDelete
    Replies
    1. Hi Raph!

      There are a few options that allow switching between inputs. Try out "tabNavigation" and "enterNavigation". I don't think I have any demos set up, but I'll look into it.

      Delete
  8. Hi,

    I'm having trouble getting the keyboard to appear when I'm using dynamically generated text input using JQ.

    Seems to work fine when I define the inputs in a JSP, but as soon as I generate them using JQuery, the selector doesn't seem to select the new inputs, any ideas?

    Thanks in advance,
    Jack

    ReplyDelete
  9. I'm appending the input to a div, I don't know whether or not it's something to do with this and its not updating the DOM correctly.

    ReplyDelete
    Replies
    1. You'll need to initialize the plugin after the input has been appended to the DOM.

      Delete
    2. Ah yes works beautifully now thanks.

      Delete
  10. This comment has been removed by a blog administrator.

    ReplyDelete

Note: Only a member of this blog may post a comment.