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

Focus on first input after row is cloned

所以我很确定我做的一切都是正确的,但我可能错过了某个地方或某事。

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

没有发生的是第一个输入没有得到关注。所以我想弄清楚为什么会这样。

我有一个小提琴的链接,我的代码如下。谢谢你提前帮忙!

jQuery的

1
2
3
4
5
6
7
8
9
10
11
12
13
$(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/

编辑与编辑更新

目前正在使用上面的新代码在我的小提琴中进行实验,但它创造了一种奇怪的行为,其中唯一获得焦点的单元格是第一个,如果我尝试聚焦,它会复制行并关注下一个第一个单元格。所以它有点工作但仍然失败


我相信您遇到的问题是最后一个单元格是文档中的最后一个可聚焦元素。 因此,当焦点输出事件被触发时,焦点已离开文档,这将删除您聚焦任何元素的能力。

使用原始代码,只需在表格下方添加一个不可见的可聚焦元素即可避免此问题:

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

请注意在表格后面包含


要编写很多代码,只需使用:

1
2
3
4
5
6
7
$(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();
    })
});