javascript - 使用 jQuery 将焦点集中到表行中的 .next() td 文本框

Question

我希望能够在单击 .editbox 后按 Tab 键，并将 焦点 转移到下一个 .editbox。我已经搞乱了代码一个小时了，无法“找到”下一个元素。

这是我的代码来做到这一点。为了获得帮助，您可能需要更多背景信息。我做了一个jsfiddle详细说明我正在处理的事情。

//on tab
        $(".edit_tr").on('keydown', '.editbox', function(e) { 
            var keyCode = e.keyCode || e.which; 

            if (keyCode == 9) { 
                e.preventDefault(); 
                var focus = $(document.activeElement);
                //console.log(focus);
                focus.closest('td').siblings('.editbox').focus();
                console.log(focus.parent().next('.editbox'));
            } 
        });

Answer 1

在第 41 行，您必须:

focus.closest('td').next().find(".editbox").show().focus();

这将返回到当前的 td，查找以下 td 标记，搜索 .editbox，在您可以 focus() 之前，您必须显示首先 () 它(使其可见)。

此解决方案仅适用于 1 行。如果您想使用 Tab 键在不同行之间移动，则必须执行以下操作:

var nextEditbox = focus.closest('td').next().find(".editbox");
//check if there are still .editboxes on the same line
if(nextEditbox.length){
    //go for it and focus the next edit box on the same line
    nextEditbox.show().focus();
}
else {
    //move to the next line and search for the next editbox
    nextEditbox = focus.closest('tr').next().find(".edit_td:first").find(".editbox");

    //show and focus
    nextEditbox.show().focus();
}

//this will end the focusing and the .change() (which is defined above) will fire and do the ajax
focus.blur(); 

您必须自己隐藏 .text 元素。

编辑:这是“保存”按钮解决方案。我没有测试过，但我认为它应该有效。

var changes = [];
$(".editbox").change(function(){
   changes.push({ id : $(this).attr("id"), changed : $(this).attr("name"), data : $(this).val() });
});

$(".savebutton").click(function(){
   //AJAX SENDING THE changes VAR TO THE PHP FILE
});