Question

I have a page using JQuery and Jeditable to create editable text elements on the page.

While editing an element, I would like to be able to tab from one element to the next.

I am unsure of how to:

• Use jeditable or jquery to capture the tab key event (keycode = 9)

• Once that event is detected, move focus to the next element and activate it via jeditable

Any help appreciated. Thanks!

Answer 1

I managed to find a way to do it:

$('div.editbox').bind('keydown', function(evt) {
    if(evt.keyCode==9) {
        $(this).find("input").blur();
        var nextBox='';
         if ($("div.editbox").index(this) == ($("div.editbox").length-1)) {
                nextBox=$("div.editbox:first");         //last box, go to first
            } else {
                nextBox=$(this).next("div.editbox");    //Next box in line
            }
        $(nextBox).dblclick();  //Go to assigned next box
        return false;           //Suppress normal tab
    };
});

On a tab, a double click (jeditable is set here to use the dblclick event) is sent to the next box. If it’s the last edit box (assigned a unique class, I was having problems with selectors), it goes to the first.

I also used find(“input”) as I was unable to find another selector that picked the jeditable-created input for blurring.

Not optimal, but it works.