Tab key with JEditable fields

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

Just a slight addition - if your jeditable fields are nested within other elements, the 'nextBox=$(this).next("div.editbox");' will not work, so create an array of the 'targeted' elements and work from within...

$('.editable_textarea').bind('keydown', function(evt) {
    if(evt.keyCode==9) {
        $(this).find("input").blur();
        // create an array of targeted jeditable fields
        var boxArray = $("#parent_element").find('.editable_textarea')
        var nextBox = '';
        if ($('.editable_textarea').index(this) == ($('.editable_textarea').length-1)) {
            nextBox = $(".editable_textarea:first");         //last box, go to first
        } else {
            // use the index of the active field to find the next one in the boxArray
            nextBox = boxArray[$('.editable_textarea').index(this)+1];    //Next box in line
        }
        $(nextBox).click();  //Go to assigned next box
        return false;           //Suppress normal tab
    };
});

Answer 2

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.

Answer 3

One solution would be to make the container for the editable elements do the listening, or perhaps even the document. Then its an easy task of querying the document or container for editable elements, determining which is the most currently edited, and moving to the next element in the list.

Answer 4

$('div.edit').bind('keydown', function(evt) {
if(evt.keyCode==9) {
    var nextBox='';
    var currentBoxIndex=$("div.edit").index(this);
     if (currentBoxIndex == ($("div.edit").length-1)) {
           nextBox=$("div.edit:first");         
       } else {
            nextBox=$("div.edit").eq(currentBoxIndex+1);    
       }
    $(this).find("input").blur();
    $(nextBox).click();  
    return false;         
};
}); 

do check this it will help you