jEditable submit on TAB as well as ENTER

Question

My jEditables work fine as long as the user hits ENTER to leave the input. If the user hits TAB, however, the changes are not posted. This is the correct and documented behavior.

I'd like TAB to work just as ENTER does. I don't need to affect any other jEditables, just get the currently active one to post back as if ENTER had been hit.

Is there any way to do this short of binding an keydown handler to the jEditable controls?

If I do have to provide a keydown handler, is there any way to programmatically tell a jEditable control to post itself without extracting the id and value from the control?

Answer 1

You could bind a click event after .editable(), so it is triggered after the jEditable's event, which set up the form. Then bind a keydown event to the text box that listens to the TAB key. So, assuming you're dealing with a text box, you can do something like the following:

$('.editable').editable('url', {
    ...
}).click(function(evt) {
    $(this).find('input').keydown(function(event) {
        if (event.which == 9) //'TAB'
            $(this).closest('form').submit();
    });
});

See this in action: http://jsfiddle.net/william/6VUHh/5/.