使用Tab从一个contenteditable切换到下一个

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

我正在尝试获取一个函数，该函数搜索并选择以下内容，即contenteditable =“true”。

The HTML looks like this:

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>

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

我认为代码应该是这样的，但我可能以错误的方式使用next（）选择器：

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

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

});

1 个解决方案

#1

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:

在可编辑元素上侦听keydown并检查字符代码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();
    }
});

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

这是一个小提琴：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/

我的例子也循环到第一个.editableDiv如果它已经到了结尾，如果你不想这样，将e.preventDefault（）移动到只在下一个焦点块内并删除循环块，小提琴：http：// jsfiddle.net/rhEC3/3/

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

另外，有点相关：使用jquery查找下一个最近的可聚焦元素？

#1