关注克隆行后的第一个输入

Focus on first input after row is cloned

本文关键字：第一个 输入      更新时间：2023-09-26

所以我很确定我做的每件事都是对的，但我可能在某个地方错过了某个事件。

这是我得到的。我有一个表，它充满了一行输入，只有一行可以开始。共有四列，在每行的第四列上，我附加了focusout事件。在focusout上，克隆最后一行并添加新行，新行的第一个输入是焦点，这样他们就可以制表并继续。

没有发生的是第一个输入没有得到焦点。所以我想弄清楚为什么会发生这种情况。

我有一个小提琴的链接，我的代码在下面。感谢您提前提供的帮助！

jQuery

$(function(){
    var $lastRow = $('#testTable').find('tr:last');
    var $tbody = $('#textTabl').find('tbody');
    var $lastCell = $('#testTable').find('tr:last').find('td:last').prev().find('input');
    $($lastRow).find("td:first > input").focus();
    $('body').on('focusout',$lastCell,function(){
        var $newRow = $($lastRow).clone(true, true);
        $($lastRow).addClass('last');
        $($newRow).insertAfter($lastRow);
        $lastRow = $('#testTable').find('tr:last');
        $($lastRow).find("td:first > input").focus();
    });
});

小提琴

http://jsfiddle.net/dh0kxtLv/1/

编辑&更新

目前正在使用上面的新代码在我的fiddle中进行实验，但它创建了一种奇怪的行为，其中唯一获得焦点的单元格是第一个单元格，如果我试图将焦点向外聚焦，它会复制行并将焦点集中在下一个第一个单元格上。所以它有点工作，但仍然失败

我认为您遇到的问题是最后一个单元格是文档中最后一个可聚焦的元素。因此，当focusout事件被触发时，焦点已经离开文档，这将使您无法聚焦任何元素。

使用原始代码，只需在表下添加一个不可见的可聚焦元素就可以避免这个问题：

http://jsfiddle.net/dh0kxtLv/6/

注意表后包含<div tabindex='0'></div>。

对于许多代码，只需使用：

$(function(){
    $('body').on('focusout','#testTable input:last',function(){
        var el=$(this);
        el.closest('tr').clone().insertAfter(el.closest('tr'))
        el.closest('table').find('tr:last input:first').focus();
    })
});
相关文章：