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!

also see question http://stackoverflow.com/questions/3890775/tabbing-between-jeditable-fields-in-a-table — Mike Henke, Sep 16 '11 at 14:57

SylvanK · Accepted Answer · 2011-09-20T17:27:33.597

6

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.

edited Sep 20 '11 at 17:27

answered May 20 '09 at 15:58

SylvanK

366
3
10

Anyone get this to work? what is the table structure need to be like ids/classes etc – Mike Henke Sep 15 '11 at 19:39
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 – Mike Henke Sep 16 '11 at 16:03
Hi Mike, I've replied under your question: http://stackoverflow.com/questions/3890775/tabbing-between-jeditable-fields-in-a-table/7489132#7489132 – SylvanK Sep 20 '11 at 17:23
Hey @SylvanK I need your help with your script. Could you help me, please? http://stackoverflow.com/questions/14303023/jeditable-using-tab-button-to-switch – breq Jan 13 '13 at 16:32

score 1 · Answer 2 · answered Sep 23 '11 at 09:27

1

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

answered Sep 23 '11 at 09:27

Engr M Hassan

1,222
4
14
22

Hassan, that's my own code from addressing another user's issue with my solution above. http://stackoverflow.com/questions/3890775/tabbing-between-jeditable-fields-in-a-table/7489132#7489132 – SylvanK Sep 30 '11 at 15:45

score 0 · Answer 3 · answered Feb 15 '14 at 11:57

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

score 0 · Answer 4 · answered May 20 '09 at 00:05

0

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.

answered May 20 '09 at 00:05

Soviut

88,194
49
192
260

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. – SylvanK May 20 '09 at 00:28

Tab key with JEditable fields

4 Answers4

Linked