Making the Tab Key work with JEditable Fields

Recently I was asked to solve a problem someone was having with JEditable. There were several fields on the page that existed as double-clickable text, which could then edited. The problem was, the tab key would not move between the fields.

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.

2 Responses to “Making the Tab Key work with JEditable Fields”

  1. this script not work (i don't know why) with my webpage and i made a change and it works…

    j('.editable_div_a').bind('keydown', function(evt) {
    if(evt.keyCode==9) {
    j(this).find("input").blur();
    var nextBox='';
    var idx = j(".editable_div_a").index(this);
    if (j(".editable_div_a").index(this) == (j(".editable_div_a").length-1)) {
    idx = 0;
    nextBox=j(".editable_div_a:first"); //last box, go to first
    } else {
    idx = idx+1;
    nextBox=j(this).next(".editable_div_a"); //Next box in line
    }
    j('.editable_div_a:eq('+idx+')').trigger('click')
    return false; //Suppress normal tab
    };
    })

  2. please can u give an example how to combine this code with the .dblclick event and all that stuff.

    so far i got this working:

    $(function() {
    $(".dblclick").editable("<?php print $url ?>save.php", {
    type : "text",
    select : true,
    indicator : "<img src='img/indicator.gif'>",
    tooltip : "Doubleclick to edit…",
    event : "dblclick",
    id : 'id',
    style : "inherit",
    submitdata : function(value, settings) { return {
    field_type : $(this).attr('name'), // define column of table
    master_id : $(this).parents("tr").attr('id'), // define table row
    selected_table : $(this).parents("table").attr('id') // define name of TABLE to edit
    }; }
    });
    });

    but how can i combine it with TAB key?

    thx in advance!!!