javascript - 使用Tab键可从一个可编辑的内容切换到下一个

我正在尝试获取一个函数，该函数搜索并选择contenteditable="true".的除法以下内容

HTML看起来像这样:

<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>

我认为代码应该看起来像这样，但是我可能以错误的方式使用了next()选择器:

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

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

});

最佳答案

侦听可编辑元素上的按键，并检查字符代码9-这是Tab键。如果是这样，请移至下一项:

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

这是一个小提琴:http://jsfiddle.net/rhEC3/2/

我的示例还循环到第一个.editableDiv，如果不希望结束，则将其移动到仅在下一个焦点块内，然后删除循环块，即提琴:http://jsfiddle.net/rhEC3/3/

另外，有些相关:Find next closest focusable element using jquery?