Question

我正在尝试获取一个搜索并选择以下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();

});

Answer 1

在可编辑元素上侦听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();
    }
});

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

我的示例也会循环到第一个.editableDiv，如果它已经到达结尾，如果你不想这样，将e.preventDefault()仅移动到下一个焦点块并移除循环块，小提琴：http://jsfiddle.net/rhEC3/3/

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

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

1 个答案: