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!

Ashok

also see question #3891275 – Suture

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.

Ashok

Anyone get this to work? what is the table structure need to be like ids/classes etc – Suture

figured out this example wasn't for datatables. had to switch the div to td and add the editbox to the td and lasteditbos to the last td – Suture

Hi Mike, I've replied under your question: #3891275 – Ashok

Hey @Ashok I need your help with your script. Could you help me, please? #14303523 – Pyelitis

Answer 2

$('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

Skite

Hassan, that's my own code from addressing another user's issue with my solution above. #3891275 – Ashok

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.

Glossa

Thanks, but jeditable elements don't appear to respond to focus(), which is part of the problem. I'm not sure how to tell jeditable to give focus to an element; alternately I may need to simulate a doubleclick? But a universal listener for "tab" isn't a bad idea. – Ashok

Answer 4

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
    };
});

Landin