Use Tab to switch from one contenteditable to the next

Question

I am trying to get a function which searches and selects the following content of a division which is contenteditable="true".

The HTML looks like this:

<table>
    <tr>
        <td>Headline:</td>
        <td><div class="editableDiv" contenteditable="true"></td>
    </tr>
    <tr>
        <td>Headline:</td>
        <td><div class="editableDiv" contenteditable="true"></td>
    </tr>
</table>

I think the code should look like this but I probably used the next() selector in a wrong way:

$('table tr td .editableRow').click(function(){

$(this).next().dblclick();

});

Why do you exactly use the `click` function and `dblclick` trigger — Okky, Jun 17 '14 at 11:46

score 6 · Accepted Answer · edited May 23 '17 at 12:27

Listen for keydown on the editable element and check for character code 9 - this is the tab key. If so, move to the next item:

var $editableDiv = $('.editableDiv');
$editableDiv.keydown(function(e){
    if ( e.which === 9 ) {
        var $index = $editableDiv.index(this),
            $next = $editableDiv.eq($index+1);
        if ( $next.length ) {
            $next.focus();
        } else {
            $editableDiv.first().focus(); // cycle
        }
        e.preventDefault();
    }
});

Here's a fiddle: http://jsfiddle.net/rhEC3/2/

My example also cycles to the first .editableDiv if it has reached the end, if you don't want this, move the e.preventDefault() to only within the next focus block and remove the cycle block, fiddle: http://jsfiddle.net/rhEC3/3/

Also, somewhat related: Find next closest focusable element using jquery?

Use Tab to switch from one contenteditable to the next

1 Answers1