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

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 2

I managed to find a way to do it:

 $('div.editbox').bind('keydown', function(event) {
        if(event.keyCode==9) {              //tab
            $(this).find("input").blur();
            if ($(this).is(".lasteditbox")) {
                $("div.editbox:first").dblclick();
                } else {
                $(this).next("div.editbox").dblclick();
                }
            return false;

        }};

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

missing a closing bracket there at the end });