The first step of course was to build a simple test environment: a page with several divs with ids such as “box1” “box2”  etc., JQuery and JEditable called, and JEditable configured to talk to a simple PHP script that simply echoes its input:

< ?php echo $_REQUEST["value"]; ?>

That was all straightforward enough, and replicated the basics of the client’s environment. The real trouble was the tab key functionality. Picking up a tab keypress is easy enough; with basic Javascript, or in JQuery:

$('div.editbox').bind('keydown', function(evt) {
        if(evt.keyCode==9) {
		//code
	}});

There were two primary problems:

1. Moving the focus out of the existing field being edited.
2. Activating the next editable field.

#1 took a fair amount of trial and error for me. JEditable creates a new input field inside the container element, and none of the JQuery selectors I was trying to use: children, sibling, etc. were working for me. Finally, I managed to get it this way:

$(this).find("input").blur();

I’ll be the first to admit that’s a little bit brute-force. If anyone has a more elegant way of selecting the created input in a JEditable element, please let me know!

Problem #2 evaded solution. I looked inside the JEditable code, and it is activated by an event; there was no function I could call directly, that I could see anyway, that would activate the next element. It took putting the problem aside for a few hours before it came to me.

JQuery nicely lets you create mouse events and other events. So the solution then became fairly obvious:

$(nextBox).dblclick();

Where nextBox is the next box in line. Note: JEditable normally takes a single click, so the “click()” function would be sufficient here. In this case, it’s configured for double-clicks.

It worked perfectly. Tab in one field would blur the current field, then activate the next field. Here’s the basic code, all together:

    $('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
        };
    });

I’ve omitted some very straightforward code to detect if shift is held down, and go up and wrap around to the bottom. But this should be sufficient to get anyone started with adding tab key functionality to their JEditable based forms.